Search bar error padding height? - html

Question

I was trying to create exactly the same search bar like this:
And I use textbox and button to recreate it using the ff: codes:
<input type="text" class="google-mail-search"><button class="google-search-btn"></button>
And here's the CSS:
.google-search-btn{
background-color: #4486F7;
background-image: url('http://i.imgur.com/UWlZaD6.png');
width: 30px;
height: 40px;
}
.google-mail-search{
border: none;
padding: 6px;
margin: 0px;
height: auto;
width: 100%;
transparent;
position: absolute;
z-index: 6;
left: 0px;
}
HERE'S MY JSFIDDLE: https://jsfiddle.net/hzbh6zya/4/
What should I fixed on my codes specifically to attain the same exact search bar?
Please help!

Answer 1

<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
.search {
width: 100%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 2

Try with this code it may help you
Html
<div class="input-group" id="adv-search">
<input type="text" class="form-control" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<option value="0" selected>All</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
css
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 768px) {
#adv-search {
width: 500px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 500px;
}
}

Answer 3

Using bootstrap
<div class="input-group">
<select class="form-control">
<option value="">Default select</option>
<option value="">Default select</option>
<option value="">Default select</option>
</select> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div>
Fiidler https://jsfiddle.net/zr61h343/1/