HTML Search element styling - html

Question

I´m trying to build a search element together with a button, something like:
Except that I need to change the background color of the search icon (blue, gray, whatever...).
Here is my code so far and the result:
.searchWrap {
position: absolute;
border: thin solid #f2f2f2;
border-radius: 5px;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
}
.searchButton {
right: -50px;
width: 30px;
height: 20px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 5px;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
}
<div className="searchWrap">
<input type="text" className="searchTerm" placeholder="Search..." />
<button type="submit" className="searchButton">
<Icon name='search' />
</button>
</div>
I'm using React. Here is my result so far:
The external border is rounded, ok, that's what I need, but the separation between the searchTerm and the searchButton is also rounded, and I need a plain separator here, something like:

Answer 1

I'm using font awesome here, so the code isn't spaced like your screenshot, but looks like you have your own library you're using with react for that icon and your spacing is fine.
All you need to do is use border-radius: 0 5px 5px 0 to keep the left side borders from rounding, and assign a border-left on the .searchButton to draw the vertical line. I changed the border color so it's more prominent, but you can use whatever color you want.
*{margin:0;padding:0;}
.searchWrap {
position: absolute;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
margin-left: 3px;
border: thin solid #ddd;
border-width: thin 0 thin thin;
border-radius: 5px 0 0 5px;
}
.searchButton {
right: -50px;
width: 30px;
height: 32px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 0 5px 5px 0;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
border: thin solid #ddd;
}
.searchTerm:focus, .searchTerm:focus + .searchButton {
border-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="searchWrap">
<input type="text" class="searchTerm" placeholder="Search..." />
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>

Answer 2

Try this for the search button css instead of border-radius
.searchButton {
...
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
...
}

Answer 3

Can you use bootstrap? Relatively simple, and once you have it, modify the css the way you want it.
https://v4-alpha.getbootstrap.com/components/input-group/#button-addons

Answer 4

Bootstrap is strongly recommended for this. See http://getbootstrap.com/components/#input-groups. Coupled with FontAwesome, you could do something like this:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="fa fa-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>