html5默认input内容清除“×”按钮去除办法

最新推荐文章于 2024-02-05 10:42:51 发布

weixin_34204722

最新推荐文章于 2024-02-05 10:42:51 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yy-5616/p/5062584.html

本文提供了一种使用HTML和CSS技术在输入框中动态呈现清除按钮的方法，解决了Firefox浏览器输入框样式控制不佳的问题，并讨论了不同浏览器（如IE10+）在输入框显示清除按钮时的差异及解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input框尺寸不太好控制(padding无视)；FireFox浏览器貌似任何类型的输入框都无动于衷；IE10+浏览器貌似任何输入框都会出现清除按钮，但是长得略微粗糙了点，设计师同学接受不了。

貌似不和谐了，咋办？传授个新技能，借助HTML以及CSS，来模拟清除按钮可动态呈现的搜索框。

如下CSS：

.input { padding: 5px; margin: 0; border: 1px solid #beceeb; }
.clear { display: none; position: absolute; width: 16px; height: 16px; margin: 6px 0 0 -20px; background: url(clear.png);}
.input::-ms-clear { display: none; }
.input:valid + .clear { display: inline; }

如下HTML：