有没有一种快速的方法来创建一个输入文本元素，在右边有一个图标，以清除输入元素本身(如谷歌搜索框)?
我环顾四周，但我只发现如何把一个图标作为输入元素的背景。有jQuery插件或其他什么?
我想在输入文本元素内的图标，类似于:
--------------------------------------------------
| X|
--------------------------------------------------
当前回答
不需要包含CSS或图像文件。不需要包含整个沉重的jQuery UI库。我写了一个轻量级的jQuery插件，为你做的魔法。你所需要的只是jQuery和插件。=）
jQuery InputSearch演示。
其他回答
你可以使用一个带有图像样式的重置按钮…
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
在这里查看它的实际操作:http://jsbin.com/uloli3/63
由于没有一个解决方案能够真正满足我们的需求，我们想出了一个简单的jQuery插件，叫做jQuery- clearsearch -
使用它就像:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
例如:http://jsfiddle.net/wldaunfr/FERw3/
<form action="" method="get">
<input type="text" name="search" required="required" placeholder="type here" />
<input type="reset" value="" alt="clear" />
</form>
<style>
input[type="text"]
{
height: 38px;
font-size: 15pt;
}
input[type="text"]:invalid + input[type="reset"]{
display: none;
}
input[type="reset"]
{
background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
background-position: center center;
background-repeat: no-repeat;
height: 38px;
width: 38px;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -9px;
left: -44px;
}
</style>
不需要包含CSS或图像文件。不需要包含整个沉重的jQuery UI库。我写了一个轻量级的jQuery插件，为你做的魔法。你所需要的只是jQuery和插件。=）
jQuery InputSearch演示。
您可以使用这些命令(没有引导)。
Array.from(document.querySelectorAll('.search-field')).forEach(field => { field.querySelector('span').addEventListener('click', e => { field.querySelector('input').value = ''; }); }); :root { --theme-color: teal; } .wrapper { width: 80%; margin: 0 auto; } div { position: relative; } input { background:none; outline:none; display: inline-block; width: 100%; margin: 8px 0; padding: 13px 15px; padding-right: 42.5px; border: 1px solid var(--theme-color); border-radius: 5px; box-sizing: border-box; } span { position: absolute; top: 0; right: 0; margin: 8px 0; padding: 13px 15px; color: var(--theme-color); font-weight: bold; cursor: pointer; } span:after { content: '\2716'; } <div class="wrapper"> <div class="search-field"> <input placeholder="Search..." /> <span></span> </div> </div>
