搜索glyphicon的背景颜色

Question

我正在尝试让搜索图标的背景颜色填满整个方框。理想情况下，它应该看起来像这样。

然而，它目前看起来像这样。

我不确定出了什么问题。

这是我的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;
}

- J.G.Sable

---

您需要使用单独的类将背景色应用于.input-group-btn。 - Paulie_D

请包含您的 CSS，谢谢。 - sol

https://codepen.io/Paulie-D/pen/PJwqOq - Paulie_D

#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

同时 - https://dev59.com/klwY5IYBdhLWcg3wcXeE - Paulie_D

Answer 1

你的标签中有 padding。

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

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

上。

    .form-control{
    padding: 3px; 
    }

如果您需要在输入框上添加填充：

这里是 Plunker

- Mickey Dhami

---

谢谢，米奇。我输入了你的代码，但它看起来仍然有点奇怪。背景颜色周围仍然有一小片白色。 - J.G.Sable

你能分享一张截图吗？ - Mickey Dhami

我更新了原始帖子，并添加了一张新图片。更改了颜色，但您仍然可以看到放大镜框的蓝色背后的白色提示。 - J.G.Sable

罪魁祸首是“border: solid 1px #E4E4E4;”。请将其删除。 - Mickey Dhami

太棒了。谢谢！ - J.G.Sable