CSS 删除某些输入上 IE10 的“清除字段”X 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14007655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove IE10's "clear field" X button on certain inputs?
提问by Niet the Dark Absol
It's a useful feature, to be sure, but is there any way to disable it?
For instance, if the form is a single text field and already has a "clear" button beside it, it's superfluous to also have the X. In this situation, it would be better to remove it.
可以肯定，这是一个有用的功能，但有什么方法可以禁用它吗？
例如，如果表单是一个单一的文本字段并且旁边已经有一个“清除”按钮，那么还有 X 是多余的。在这种情况下，最好将其删除。
Can it be done, and if so, how?
可以做吗，如果可以，怎么做？
回答by Ry-
Style the ::-ms-clearpseudo-elementfor the box:
为框设置::-ms-clear伪元素的样式：
.someinput::-ms-clear {
display: none;
}
回答by jimp
I found it's better to set the widthand heightto 0px. Otherwise, IE10 ignores the padding defined on the field -- padding-right-- which was intended to keep the text from typing over the 'X' icon that I overlayed on the input field. I'm guessing that IE10 is internally applying the padding-rightof the input to the ::--ms-clearpseudo element, and hiding the pseudo element does not restore the padding-rightvalue to the input.
我发现最好将width和设置height为0px。否则，IE10 会忽略字段上定义的填充 -- padding-right-- 这旨在防止文本在我覆盖在输入字段上的“X”图标上键入。我猜 IE10 在内部将padding-right输入的 应用到::--ms-clear伪元素，隐藏伪元素不会将padding-right值恢复到input.
This worked better for me:
这对我来说效果更好：
.someinput::-ms-clear {
width : 0;
height: 0;
}
回答by Wallace Sidhrée
I would apply this rule to all input fields of type text, so it doesn't need to be duplicated later:
我会将此规则应用于所有文本类型的输入字段，因此以后不需要重复：
input[type=text]::-ms-clear { display: none; }
One can even get less specific by using just:
甚至可以通过仅使用以下内容来获得不那么具体的信息：
::-ms-clear { display: none; }
I have used the later even before adding this answer, but thought that most people would prefer to be more specific than that. Both solutions work fine.
在添加这个答案之前，我已经使用了后者，但认为大多数人更愿意比这更具体。两种解决方案都可以正常工作。
回答by ducdhm
You should style for ::-ms-clear(http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx):
您应该为::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx) 设置样式：
::-ms-clear {
display: none;
}
And you also style for ::-ms-revealpseudo-element for password field:
您还::-ms-reveal为密码字段设置了伪元素样式：
::-ms-reveal {
display: none;
}
回答by TomXP411
I think it's worth noting that all the style and CSS based solutions don't work when a page is running in compatibility mode. The compatibility mode renderer ignores the ::-ms-clear element, even though the browser shows the x.
我认为值得注意的是，当页面在兼容模式下运行时，所有基于样式和 CSS 的解决方案都不起作用。兼容模式渲染器会忽略 ::-ms-clear 元素，即使浏览器显示 x。
If your page needs to run in compatibility mode, you may be stuck with the X showing.
如果您的页面需要在兼容模式下运行，您可能会被 X 显示卡住。
In my case, I am working with some third party data bound controls, and our solution was to handle the "onchange" event and clear the backing store if the field is cleared with the x button.
就我而言，我正在使用一些第三方数据绑定控件，我们的解决方案是处理“onchange”事件并在使用 x 按钮清除该字段时清除后备存储。
回答by ClemPat
To hide arrows and cross in a "time" input :
要隐藏箭头并在“时间”输入中交叉：
#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
-webkit-appearance: none;
margin: 0;
}
