搜索字形图标的背景颜色

Question

我正在尝试让我的搜索字形上的背景颜色占据整个框。理想情况下，它应该看起来像 this。

但是，它目前看起来像this。

我不确定发生了什么。

这是我的 html（我正在使用 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>

编辑添加我的 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;
}

Answer 1

你有填充

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

这就是原因。 你应该把它放在

    .form-control{
    padding: 3px; 
    }

如果您需要对输入进行填充

Here's Plunker