Remove IE10 s clear field X button on certain inputs

Question

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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Style the   -ms-clear pseudo-element for the box    someinput  -ms-clear       display  none

User · Answer

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

[css] Remove IE10's "clear field" X button on certain inputs?

Examples related to css

Examples related to internet-explorer-10