bootstrap3怎么在文本框右侧加一个清除按钮?

标签: bootstrap
发布时间: 2017/11/17 16:26:16
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

在使用bootstrap的时候遇到了一些麻烦,所以一些帮助会很棒。谢谢
我想要的:

enter image description here

我当前的代码:

<div class="form-group">
    <input type="text" 
           class="form-control" 
           id="findJobTitle" 
           name="findJobTitle" 
           placeholder="Job Title, Keywords" 
           onkeyup="showResult()"> 
</div>

当前截图:

enter image description here

解决方法 1:

HTML:

<div class="btn-group">
  <input id="searchinput" type="search" class="form-control">
  <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
</div>

CSS:

#searchinput {
    width: 200px;
}
#searchclear {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

JS:

$("#searchclear").click(function(){
    $("#searchinput").val('');
});


官方微信
官方QQ群
31647020