@thebluefox总结了全部。您还只需要使用Javascript即可使该按钮正常工作。这是一个SSCCE，您可以复制’n’粘贴’n’运行它：
<!DOCTYPE html><html lang="en"> <head> <title>SO question 2803532</title> <script src="http://pre.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { $('input.deletable').wrap('<span />').after($('<span/>').click(function() { $(this).prev('input').val('').trigger('change').focus(); })); }); </script> <style> span.deleteicon { position: relative; } span.deleteicon span { position: absolute; display: block; top: 5px; right: 0px; width: 16px; height: 16px; background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px; cursor: pointer; } span.deleteicon input { padding-right: 16px; box-sizing: border-box; } </style> </head> <body> <input type="text" > </body></html>jQuery并不是必须的，它只是将渐进增强所需的逻辑与源代码很好地分开了，您当然也可以继续使用纯 HTML / CSS / JS：
<!DOCTYPE html><html lang="en"> <head> <title>SO question 2803532, with "plain" HTML/CSS/JS</title> <style> span.deleteicon { position: relative; } span.deleteicon span { position: absolute; display: block; top: 5px; right: 0px; width: 16px; height: 16px; background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px; cursor: pointer; } span.deleteicon input { padding-right: 16px; box-sizing: border-box; } </style> </head> <body> <span > <input type="text"> <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span> </span> </body></html>您最终只会得到难看的HTML（以及与跨浏览器不兼容的JS;））。
请注意，当用户界面外观不是您最关心的问题，而功能是，则只需使用
<input type="search">代替即可
<input type="text">。它将在支持HTML5的浏览器上显示（特定于浏览器的）清除按钮。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）