html - 在输入组的末尾添加一个搜索图标 IN 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>

这就是它目前的样子。

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

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

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 类而不是覆盖所有的input-groups

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

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>

Answer 3

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

Answer 4

我使用假 div 完成了它。
FIDDLE

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