background color on search glyphicon

Question

I'm trying to get my the background color on my search glyph to take up the full box. Ideally, it should look like this.

However, it currently looks like this.

I'm not sure what's going on.

Here's my html (I'm using Bootstrap).

<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>

Edited to add my CSS:

#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;
}

You'd need to apply the bg color to `.input-group-btn` with a separate class. — Paulie_D, Sep 13 '17 at 16:20
#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; } #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; } — J.G.Sable, Sep 13 '17 at 16:25
Also - https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration — Paulie_D, Sep 13 '17 at 16:26

score 1 · Accepted Answer · answered Sep 13 '17 at 16:37

1

You have padding in

    #custom-search-input{ 
       padding: 3px; 
    }

That's the reason. You should instead have it on

    .form-control{
    padding: 3px; 
    }

if you need padding on input

Here's Plunker

answered Sep 13 '17 at 16:37

Mickey Dhami

100
2
14

Thanks, Mickey. I inputted your code but it still looks wonky. There's a sliver of white around the background color still on all side. – J.G.Sable Sep 13 '17 at 16:40
Can you share a screenshot? – Mickey Dhami Sep 13 '17 at 16:45
I updated the original post with a new image. Changed the colors, but you can still see the hint of white behind the blue of the looking glass box. – J.G.Sable Sep 13 '17 at 16:48
The culprit is "border: solid 1px #E4E4E4;". Remove it. – Mickey Dhami Sep 13 '17 at 16:49
SO much better. Thank you! – J.G.Sable Sep 13 '17 at 16:52

background color on search glyphicon

1 Answers1