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

Question

在我的项目中，我需要在引导搜索框中包含搜索和清除图标，如下图所示

任何人都可以告诉我如何解决它

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>

请参阅输出here

Answer 2

如果您将jQuery Mobile js文件添加到您的页面，您只需添加

即可

type="search"

和

data-clear-btn="true"

到元素，它们将自动出现。

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