我想要一个漂亮的小图标，当点击它时，它会清除<；输入>；盒
这是为了节省空间，而不是在输入框之外有一个清晰的链接.
我的CSS技能很弱...这是一张iPhone外观的截图.
我想要一个漂亮的小图标，当点击它时，它会清除<；输入>；盒
这是为了节省空间，而不是在输入框之外有一个清晰的链接.
我的CSS技能很弱...这是一张iPhone外观的截图.
从HTML5开始，您可以使用<input type="search">.但这不一定是可定制的.如果您想要完全控制UI，这里有两个启动示例.一个使用jQuery，另一个不使用.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('input.deletable').wrap('<span class="deleteicon"></span>').after($('<span>x</span>').click(function() {
$(this).prev('input').val('').trigger('change').focus();
}));
});
</script>
<style>
span.deleteicon {
position: relative;
display: inline-flex;
align-items: center;
}
span.deleteicon span {
position: absolute;
display: block;
right: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background-color: #ccc;
font: 13px monospace;
text-align: center;
line-height: 1em;
cursor: pointer;
}
span.deleteicon input {
padding-right: 18px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="deletable">
</body>
</html>jQuery不是严格需要的，它很好地将渐进式增强所需的逻辑与源代码分开，当然您也可以使用plain HTML/CSS/JS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532, with "plain" HTML/CSS/JS</title>
<style>
span.deleteicon {
position: relative;
display: inline-flex;
align-items: center;
}
span.deleteicon span {
position: absolute;
display: block;
right: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background-color: #ccc;
font: 13px monospace;
text-align: center;
line-height: 1em;
cursor: pointer;
}
span.deleteicon input {
padding-right: 18px;
box-sizing: border-box;
}
</style>
</head>
<body>
<span class="deleteicon">
<input type="text">
<span onclick="var input = this.previousElementSibling; input.value = ''; input.focus();">x</span>
</span>
</body>
</html>最终只会得到更难看的HTML(和非跨浏览器兼容的JS；).
同样，如果你最关心的不是用户界面的外观，而是功能，那么就用<input type="search">代替<input type="text">.它将在支持HTML5的浏览器上显示(特定于浏览器的)清除按钮.