在某些输入上删除IE10的“清场”X按钮？

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

能做到吗？如果能做到，如何做到？

325933 次浏览

小开

最佳答案

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

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

小开

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

这对我来说更好：

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

小开

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

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

一个人甚至可以通过使用只是得到不太具体：

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

我甚至在添加这个答案之前就使用了后面的，但我认为大多数人更喜欢比这更具体。这两种解决方案都很好。

小开

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

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

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

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

小开

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

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

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

小开

要在“time”输入中隐藏箭头和交叉：

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