在Bootstrap 3中，在输入组的末尾添加一个搜索图标。

Question

自2.4.3以来，表单已经发生了变化。之前的链接是可行的，但现在不再适用。

以下是我目前搜索栏的代码。

<li>
   <div class="input-group" id="fifteenMargin">
      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
   </div>
</li>

这是当前的样子。 我希望最终它看起来像这样。 虽然这个问题与这个问题相似，但不同之处在于前者只是在外部添加一个按钮而没有两者之间的空间。这里是如何将其放入搜索栏中。

- Jack

Answer 1

试一试...

.input-group-btn > .btn {
  border-left-width:0;left:-2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.input-group .form-control:focus {
 box-shadow:none;
 -webkit-box-shadow:none; 
 border-color:#cccccc; 
}

你可能想要使用一个特殊的CSS类，而不是覆盖所有的。

演示：http://bootply.com/86446

- Zim

Answer 2

尝试

<div class="input-group">
    <span class="input-group-addon">
        <i class="glyphicon glyphicon-user"></i>
    </span>
    <input type="text" name="login" class="form-control" placeholder="Ваш логин">
</div>

- Ivan

Answer 3

我使用虚拟 div 完成了它。
FIDDLE

.styleSelect {
    position:absolute;
    z-index:10;
  width: 168px;
  height: 34px;
  border: 1px solid #000;
}

- vishalkin

---

使用绝对定位在跨浏览器上不起作用吗？如果宽度改变，可能不是精确的。 - Jack

Answer 4

你不能在技术上将它放置在搜索框内部，而是可以通过绝对定位将提交放在搜索框的上方。

- dv8withn8