Remove IE10's "clear field" X button on certain inputs?
Style the ::-ms-clear
pseudo-element for the box:
.someinput::-ms-clear {
display: none;
}
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;
}
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.