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

Question

可以肯定的是，这是一个有用的功能，但是有什么方法可以禁用它吗？
例如，如果表单是单个文本字段并且旁边已经有一个“清除”按钮，那么再有 X 也是多余的。在这种情况下，最好将其删除。

可以做到吗？如果可以，怎么做？

Answer 1

设置盒子的::-ms-clear伪元素样式：

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

Answer 2

我发现最好将widthand设置height为0px. 否则，IE10 会忽略该字段上定义的填充padding-right——这是为了防止文本键入我覆盖在输入字段上的“X”图标。我猜 IE10 在内部将padding-right输入的 应用于::--ms-clear伪元素，隐藏伪元素不会将padding-right值恢复到input.

这对我来说效果更好：

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

Answer 3

我会将此规则应用于文本类型的所有输入字段，因此以后不需要复制：

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

甚至可以通过仅使用以下内容变得不那么具体：

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

我什至在添加这个答案之前就使用了后者，但认为大多数人更愿意比这更具体。两种解决方案都可以正常工作。

Answer 4

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

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

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

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

Answer 5

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

如果您的页面需要在兼容模式下运行，您可能会被 X 显示卡住。

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

Answer 6

要隐藏箭头并在“时间”输入中交叉：

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}