本文翻译自:Remove IE10's “clear field” X button on certain inputs?
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? 可以这样做,如果是,怎么做?
#1楼
参考:https://stackoom.com/question/wm1v/在某些输入上删除IE-的-清除字段-X按钮
#2楼
Style the ::-ms-clear
pseudo-element for the box: 为该框设置::-ms-clear
伪元素的样式:
.someinput::-ms-clear {
display: none;
}
#3楼
I found it's better to set the width
and height
to 0px
. 我发现最好将width
和height
设置为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. 否则,IE10会忽略在字段上定义的填充 - padding-right
- 这是为了防止文本在我覆盖在输入字段上的“X”图标上键入。 I'm guessing that IE10 is internally applying the padding-right
of the input to the ::--ms-clear
pseudo element, and hiding the pseudo element does not restore the padding-right
value to the input
. 我猜测IE10在内部将输入的padding-right
应用于::--ms-clear
伪元素,并且隐藏伪元素不会将padding-right
值恢复为input
。
This worked better for me: 这对我来说效果更好:
.someinput::-ms-clear {
width : 0;
height: 0;
}
#4楼
I would apply this rule to all input fields of type text, so it doesn't need to be duplicated later: 我将此规则应用于text类型的所有输入字段,因此不需要在以后复制:
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. 两种解决方案都很好。
#5楼
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-reveal
pseudo-element for password field: 你也为密码字段设置::-ms-reveal
伪元素的样式:
::-ms-reveal {
display: none;
}
#6楼
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. 我认为值得注意的是,当页面在兼容模式下运行时,所有基于样式和CSS的解决方案都不起作用。 The compatibility mode renderer ignores the ::-ms-clear element, even though the browser shows the x. 即使浏览器显示x,兼容模式渲染器也会忽略:: - ms-clear元素。
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按钮清除字段。