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?

This is also useful on a field with a default value where blank doesn't make sense, e.g. quantity. — Joe Flynn, Jun 21 '13 at 18:53
as this is not triggering an input typing, this is very tricky when you bind javascript event. — Kiwy, Jan 23 '14 at 12:31

score 1295 · Accepted Answer · answered Dec 23 '12 at 00:50

1295

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

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

answered Dec 23 '12 at 00:50

Ry-

199,309
51
404
420

14

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. – Yousef Salimpour Aug 11 '13 at 06:43
@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 :) – Ry- Aug 11 '13 at 14:19
@minitech - Its IE9 on Windows 7 machine – ManJan Aug 14 '13 at 21:27
@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. – Ry- Aug 14 '13 at 22:17
3

This control ONLY appears in IE10+ on Win8. The trick is that it still appears when the document is put in a compatibility mode. – EricLaw Sep 06 '13 at 15:45
48

@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! – OMA Sep 17 '13 at 11:13

score 274 · Answer 2 · edited Jun 07 '13 at 17:46

274

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

edited Jun 07 '13 at 17:46

streetlight

5,830
11
56
99

answered Feb 06 '13 at 21:25

jimp

15,885
3
23
35

4

Here is a jsFiddle illustrating this workaround: http://jsfiddle.net/zoldello/S5YRj/ – Phil Mar 05 '14 at 15:06
add `display: none` – snir Dec 15 '20 at 15:42

score 113 · Answer 3 · edited Jul 23 '18 at 21:33

113

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.

edited Jul 23 '18 at 21:33

Alexander Abakumov

10,817
10
71
111

answered Aug 16 '13 at 10:00

Wallace Sidhrée

9,305
6
43
55

score 76 · Answer 4 · answered Feb 19 '14 at 01:54

76

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

answered Feb 19 '14 at 01:54

ducdhm

1,899
14
24

6

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. – Ry- Feb 26 '14 at 18:53
3

@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. – DarrellNorton Apr 03 '15 at 13:10

score 11 · Answer 5 · answered Aug 02 '16 at 16:40

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.

score 0 · Answer 6 · answered May 04 '20 at 15:40

0

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

answered May 04 '20 at 15:40

ClemPat

39
7

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

6 Answers6

Linked

Related