清除IE10下input的叉叉(X)和密码输入框的眼睛图标

本文介绍如何通过CSS代码禁用IE10及以上版本浏览器中type='text'和type='password'输入框自带的清除和显示密码按钮。

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

从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本,
如下图:
clear-textbox-button-ie
对于type=”password”的 input 则会在右方显示一个小眼睛的图标,占击这个图标可以显示已经输入的内容。
大多数情况下,为了和其他浏览器呈现相同的效果,需要将input文本输入框右方的X给去掉,将密码输入框右边的小眼睛也给去掉。
只要使用以下CSS代码可轻松实现隐藏IE浏览器自带的文本删除按钮和密码查看按钮。

1
2
input::-ms-clear{ display : none ;}
input::-ms-reveal{ display : none ;}

加上后,如下图,IE的XX就看不到了
remove-clear-textbox-button-ie
其中 ::-ms-clear 是文本清除按钮,也就是input右方的叉叉 ::-ms-reveal是密码查看按钮,也就密码框右边的小眼睛。
当然,也可以单独清除其中一项。

原文链接地址: http://www.w3cways.com/1940.html

### 去除 HTML Input 框右侧的清除按钮 在现代浏览器中,某些情况下会自动显示一个清除按钮(通常是一个小叉号),用于快速清空输入框的内容。如果希望移除此功能,可以通过 CSS 或 JavaScript 实现。 #### 方法一:使用 CSS 移除清除按钮 不同浏览器对清除按钮的支持方式有所不同,因此需要针对不同的渲染引擎编写兼容性代码: ```css /* 针对 WebKit 浏览器 (如 Chrome, Safari) */ input[type="text"]::-webkit-clear-button { display: none; } /* 针对 Mozilla Firefox */ input[type="text"]::-moz-clear-button { display: none; } ``` 上述代码分别处理了基于 WebKit Gecko 渲染引擎的清除按钮[^1]。 对于 IE/Edge 的情况,则可以尝试以下属性设置: ```css input[type="text"] { -ms-clear: none; /* 针对旧版 Edge Internet Explorer */ } ``` 以上方法能够有效隐藏大多数主流浏览器中的默认清除按钮[^3]。 #### 方法二:通过 JavaScript 动态控制 如果仅依赖于 CSS 无法完全解决问题或者需要更灵活的操作,也可以借助 JavaScript 来禁用该行为。例如,在页面加载完成后动态修改 DOM 属性: ```javascript document.querySelectorAll('input[type="text"]').forEach(function(inputElement){ inputElement.onfocus = function() { this.setAttribute("autocomplete", "off"); }; }); ``` 此脚本片段遍历所有的 `type=text` 输入框并为其绑定焦点事件处理器,从而关闭自动完成特性以及关联的功能组件(比如清除图标)。不过需要注意的是这种方法可能会影响用户体验,应谨慎使用[^4]。 另外值得注意的一点是,当自定义了一个带有删除图标的交互式链接作为替代方案时,原始内置的小叉子可能会重新显现出来;此时除了应用上面提到的技术手段外还需要额外调整HTML结构以避免冲突发生。 ### 总结 综上所述,无论是采用纯粹前端样式的解决方案还是结合简单的逻辑判断都可以达到预期效果即消除不必要的视觉干扰物——input控件旁边那个恼人的“X”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值