删除某些输入上的IE10的“清除字段” X按钮?

CSS

前端古一

2020-03-16

当然,这是一个有用的功能,但是有什么方法可以禁用它吗?例如,如果表单是单个文本字段,并且旁边已经有“清除”按钮,则也不需要X。在这种情况下,最好将其删除。

能做到吗?如果可以,怎么做?

第1746篇《删除某些输入上的IE10的“清除字段” X按钮?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
LEY斯丁小小 2020.03.16

我认为值得注意的是,当页面在兼容模式下运行时,所有基于样式和CSS的解决方案都无法使用。即使浏览器显示x,兼容模式渲染器也会忽略::-ms-clear元素。

如果您的页面需要在兼容模式下运行,则可能会遇到X停留的情况。

就我而言,我正在使用一些第三方数据绑定控件,并且我们的解决方案是处理“ onchange”事件并如果使用x按钮清除了该字段,则清除后备存储。

Jim小小 2020.03.16

我将此规则应用于text类型的所有输入字段,因此以后无需重复:

input[type=text]::-ms-clear { display: none; }

通过使用以下方法甚至可以降低具体性:

::-ms-clear { display: none; }

我甚至在添加此答案之前就使用了后者,但认为大多数人都希望比此更具体。两种解决方案都可以正常工作。

Gil伽罗 2020.03.16

设置框::-ms-clear伪元素的样式

.someinput::-ms-clear {
    display: none;
}
猪猪阳光 2020.03.16

您应该为::-ms-clearhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx)设置样式

::-ms-clear {
   display: none;
}

您还可::-ms-reveal以为密码字段设置伪元素样式

::-ms-reveal {
   display: none;
}
伽罗古一 2020.03.16

我发现最好将width设置height0px否则,IE10会忽略在字段上定义的填充padding-right--旨在防止文本在我覆盖在输入字段上的“ X”图标上键入内容。我猜测IE10在内部将padding-right输入的应用于::--ms-clear伪元素,而隐藏伪元素不会将padding-right恢复input

这对我来说更好:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android