I'm struggling to make the background color of my search glyph fill the entire box. I want it to resemble this image.
However, at the moment, it looks more like this.
I can't figure out what's causing the issue.
Below is the HTML code I'm using (Bootstrap is included).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Search by user name, member types, genres..." />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>Here is the CSS code I've applied:
#custom-search-input{
padding: 3px;
border: solid 1px #E4E4E4;
border-radius: 6px;
background-color: #fff;
height: 75%;
}
#custom-search-input input{
border: 0;
box-shadow: none;
}
.input-group-btn{
background: #E44424;
}
#custom-search-input button{
margin: 2px 0 0 0;
background: #E44424;
box-shadow: none;
border: 0;
color: black;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc;
}
#custom-search-input button:hover{
border: 0;
box-shadow: none;
border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{
font-size: 23px;
}