Remove IE10's "clear field" X button on certain inputs?
CssInternet Explorer-10Css Problem Overview
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.
Can it be done, and if so, how?
Css Solutions
Solution 1 - Css
Style the ::-ms-clear
pseudo-element for the box:
.someinput::-ms-clear {
display: none;
}
Solution 2 - Css
I found it's better to set the width
and height
to 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-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
.
This worked better for me:
.someinput::-ms-clear {
width : 0;
height: 0;
}
Solution 3 - Css
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.
Solution 4 - Css
You should style for ::-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 {
display: none;
}
Solution 5 - Css
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.
If your page needs to run in compatibility mode, you may be stuck with the X showing.
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.
Solution 6 - Css
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;
}