twitter-bootstrap 在输入组 IN bootstrap 3 的末尾添加搜索图标

Add a Search icon in the end of a input-group IN bootstrap 3

提问by Hyman

Forms have changed since 2.4.3 and Thiswould have worked before but not anymore.

表单自 2.4.3 以来发生了变化，这在以前可以使用，但不再有效。

This is the current code I have for my search bar.

这是我的搜索栏的当前代码。

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

This is what it currently looks like.

这是它目前的样子。

I would like it to eventually look like this.

我希望它最终看起来像这样。

Although this question is close this to this oneits different as that is just having a button on the outside without space between the two. This is how to get it into the search bar.

虽然这个问题与这个问题很接近，但它的不同之处在于它只是在外面有一个按钮，两者之间没有空间。这是将其放入搜索栏中的方法。

回答by Zim

Try this..

试试这个..

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

You may want to use a special CSS class instead of overriding all of the input-groups

你可能想使用一个特殊的 CSS 类而不是覆盖所有的input-groups

Demo: http://bootply.com/86446

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

回答by Ivan

try

尝试

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

回答by dv8withn8

You can't technically place it "inside" the search box, rather place your submit OVER the search box via absolute positioning.

从技术上讲，您不能将其放置在搜索框的“内部”，而是通过绝对定位将您的提交放在搜索框上方。

回答by vishalkin

I got it done using fake div.
FIDDLE

我使用假 div 完成了它。
FIDDLE

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