如何在Bootstrap搜索框中添加搜索和清除图标

Question

在我的项目中，我需要在Bootstrap搜索框中包含搜索和清除图标，就像下面的图片一样。 有人能告诉我如何修复它吗？

- lalith458

Answer 1

我认为你能做到这一点。

<div class="input-group">
  <span class="input-group-addon glyphicon glyphicon-search"></span>
  <input type="text" class="form-control">
  <span class="input-group-addon glyphicon glyphicon-remove-circle"></span>
</div>

See the output here

- HTTP

Answer 2

如果您在页面中添加了jQuery Mobile js文件，只需添加以下内容：

type="search"

和

data-clear-btn="true"

将它们添加到元素中，它们将自动显示。

- Jonathan E. Landrum

Answer 3

有几种方法可以做到这一点，但其中一种简单的方法是在一个相对定位的父元素中创建三个元素。你需要稍微调整一下，但应该可以让你开始。

HTML：

<div class="wrap">
    <input type="text" placeholder="Search YouTube" class="form-control">
    <span class="glyphicon glyphicon-search"></span>
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>  

CSS：

.wrap{
    position: relative;
}
.wrap span{
    position: absolute;
    top: 4px;
    left: 3px;
}
.wrap .glyphicon-remove-circle {
    left: auto;
    right: 3px;
}

- Will

---

建议：我相信Bootstrap已经提供了预设样式，因此您不需要去搞CSS。 - Derek 朕會功夫