My attempt to implement a search bar CSS from CodePen is not working properly in React. Even though I used the exact code provided, the search bar seems to be buggy.
If you want to take a look at the code sandbox for better reference, you can visit: https://codesandbox.io/s/sad-moser-mdxmd?file=/src/Dashboard.js
Below is the code that I am currently using:
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" id="input_text"></input>
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I aim to make the search bar resemble this image description:
For more details on the code I tried to utilize, you can refer to this link: https://codepen.io/huange/pen/rbqsD