清除输入文本中的图标
清除输入文本中的图标
提问于 2011-06-07 06:00:36
有没有一种快速的方法来创建一个输入文本元素，在右边有一个图标来清除输入元素本身(就像google搜索框一样)？
我环顾四周，但我只找到了如何将图标作为输入元素的背景。有没有jQuery插件或者别的什么？
我想要输入文本元素中的图标，如下所示：
--------------------------------------------------
| X|
--------------------------------------------------回答 12
Stack Overflow用户
发布于 2011-06-07 06:02:21
你可以使用一个带有图像样式的重置按钮...
<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
Stack Overflow用户
发布于 2013-12-12 00:13:41
Stack Overflow用户
发布于 2012-09-13 17:05:56
由于所有的解决方案都不能真正满足我们的需求，我们想出了一个名为jQuery-ClearSearch的简单jQuery插件--
使用它非常简单，就像：
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6258521
复制相关文章
相似问题