在我的项目中,我需要在Bootstrap搜索框中包含搜索和清除图标,就像下面的图片一样。
有人能告诉我如何修复它吗?
![enter image description here](https://istack.dev59.com/hLSeL.webp)
我认为你能做到这一点。
<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
type="search"
和
data-clear-btn="true"
有几种方法可以做到这一点,但其中一种简单的方法是在一个相对定位的父元素中创建三个元素。你需要稍微调整一下,但应该可以让你开始。
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>
.wrap{
position: relative;
}
.wrap span{
position: absolute;
top: 4px;
left: 3px;
}
.wrap .glyphicon-remove-circle {
left: auto;
right: 3px;
}