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?

Unto

This is also useful on a field with a default value where blank doesn't make sense, e.g. quantity. – Wallford

as this is not triggering an input typing, this is very tricky when you bind javascript event. – Gertudegerty

Answer 1

Style the ::-ms-clear pseudo-element for the box:

.someinput::-ms-clear {
    display: none;
}

Covariance

It's funny if you use IE compatibility mode to render your page with engines prior to IE10, this pseudo element doesn't work and it shows the button anyway. – Gaea

@Yousef: Yes, that’s how it works and part of why you should never use Compatibility Mode in an actual website. It’s not actually compatible :) – Covariance

@minitech - Its IE9 on Windows 7 machine – Jeth

@ManJan: Are you sure it’s not coming from somewhere else, then? I use IE9 on Windows 7 and it has never had any × buttons on the right of textboxes and that hasn’t changed as far as I know. – Covariance

This control ONLY appears in IE10+ on Win8. The trick is that it still appears when the document is put in a compatibility mode. – Ionic

@EricLaw: Well, NOT ONLY on Win8. I'm using Windows 7 right now and I can see those X buttons in my IE10. So you might say it's an IE10+ only feature (not sure about IE9, though), but definitely NOT Win8 only, since this appears in the Win7 version of IE10. Anyway, thanks for the tip, @minitech! – Acrodrome

Answer 2

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;
}

Fowliang

Here is a jsFiddle illustrating this workaround: jsfiddle.net/zoldello/S5YRj – Steadfast

add display: none – Moonshot

Answer 3

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.

Swale

Answer 4

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;
}

Guerdon

Note – think about whether you can make the ::-ms-reveal element work before removing it! (Or if you’re providing this button for everyone, like the original asker.) Some really do use it. – Covariance

@minitech - that sounds great. Can you tell us how to make it work with Javascript binding on input events? It does not raise an event so it's almost impossible to work with. – Parochialism

Answer 5

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.

Jijib

Answer 6

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;
}

Satanic

Exactly what I needed for JxBrowser and input type time. Cheers! – Trituration