IE游览器 input X 去掉文本框的叉叉和密码输入框的眼睛图标

input去掉文本框的叉叉和密码输入框的眼睛图标

从IE 10开始,type="text" 的 input 在用户输入内容后,在后面会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本;

对于 type="password"的 input 则会在右方显示一个小眼睛的图标,占击这个图标可以显示已经输入的内容。

大多数情况下,为了和其他浏览器呈现相同的效果,需要将input文本输入框右方的X给去掉,将密码输入框右边的小眼睛也给去掉。

解决方法:只要使用以下CSS代码可轻松实现隐藏IE浏览器自带的文本删除按钮和密码查看按钮。

CSS样式:

<style type="text/css">
input::-ms-clear, input::-ms-reveal{display: none;}
</style>

HTML代码:

<form>
用户名:<input type="text" value="请输入用户名" />
密  码:<input type="password" />
</form>

其中 ::-ms-clear 是文本清除按钮,也就是input右方的叉叉 ::-ms-reveal是密码查看按钮,也就密码框右边的小眼睛。
当然,也可以单独清除其中一项,看项目需求了!



原文链接:HelloWeb前端网 » IE游览器 input X 去掉文本框的叉叉和密码输入框的眼睛图标 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享