有没有一种快速的方法可以创建一个输入文本元素，并在右侧有一个图标来清除输入元素本身（如谷歌搜索框）？
我环顾四周，但我只找到了如何把图标作为输入元素的背景。有没有jQuery插件或其他东西？
我想要输入文本元素内的图标，类似于：
--------------------------------------------------
| X|
--------------------------------------------------
将 a 添加到您的输入
中支持相当不错，但在 IE<10 中不起作用type="search"
<input type="search">如果您需要IE9支持，这里有一些解决方法
<input type="text">/**
* Clearable text inputs
*/
$(".clearable").each(function() {
const $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});/* Clearable text inputs */
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 24px;
width: 100%;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
font-size: 1.2em;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}<span class="clearable">
<input type="text" name="" value="" placeholder="">
<i class="clearable__clear">×</i>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><input class="clearable" type="text">
设置一个并播放它的背景图像：class="clearable"
/**
* Clearable text inputs
*/
function tog(v){return v ? "addClass" : "removeClass";}
$(document).on("input", ".clearable", function(){
$(this)[tog(this.value)]("x");
}).on("mousemove", ".x", function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]("onX");
}).on("touchstart click", ".onX", function( ev ){
ev.preventDefault();
$(this).removeClass("x onX").val("").change();
});
// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server/*
Clearable text inputs
*/
.clearable{
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */<input class="clearable" type="text" name="" value="" placeholder="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>诀窍是设置一些正确的填充（我用了18px）并把背景图像推到右边，移开视线（我用过）。
18px填充将防止文本隐藏在图标下方（可见时）。
jQuery将添加显示清晰图标的类（如果具有值）。
现在，我们只需要用jQ定位带有类的输入，并检测鼠标是否在18px“x”区域内;如果在里面，则添加类 。
单击该类将删除所有类，重置输入值并隐藏图标。inputright -10px center"x"inputxmousemoveonXonX
7x7px gif：
Base64 字符串：
data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
我是否可以建议，如果你同意将其限制在html 5兼容的浏览器上，只需使用：
<input type="search" />
诚然，在Chromium（Ubuntu 11.04）中，这确实要求在明文图像/功能出现之前，元素内部有文本。input
参考：
