How can I disable the clear button that IE10 inserts into textboxes?

Question

How can I disable the new functionality in Internet Explorer 10 that shows a little 'x' in a textbox when it's focused and I have content in it?

Schuss

They keep adding and adding stuff... Good idea, but... – Injure

How could they possibly think this is a good idea? I had no idea what it did the first time I saw it and I'm a developer... – Hyaline

Not in the spec so it shouldn't be there – Pajamas

Such an unbelievably terrible feature. When displaying numbers with right align - you go to click at a certain position in the number, but the cursor ends up somewhere else because this clear button shifts the text over to the left! IE is an embarrassment to MS. – Grandnephew

Possible duplicate of Remove IE10's "clear field" X button on certain inputs? – Backslide

Answer 1

input[type=text]::-ms-clear {
    display: none;
}

Schuss

Great, thanks! Are there similar methods available for other form elements? – Tbilisi

FYI: This only works only when the browser is IE10 mode and not compatibility mode. grrr!! – Velocity

So annoying that this is the case. Compat mode should strip them out... ARGH! – Pajamas

Does anyone know, how to fix this for IE9? – Marsupium

@ScottSelby: maybe users will really like it, and all the other browsers will implement it. The HTML spec doesn't define how form fields should be rendered (I don't think). Nobody seemed to mind when iOS Safari's URL field added an "x" icon to clear that. – Bradbury

It's better to set the width and height to 0px. Otherwise, IE10 ignores the padding defined on the field: https://mcmap.net/q/53946/-remove-ie10-39-s-quot-clear-field-quot-x-button-on-certain-inputs – Chokebore

Effective as it can be used in global css. – Herwick

Answer 2

In IE 10+, text inputs (input[type=text]) show a (x) button on the right-side on the field once you start typing, it's used to clear/remove the entered text value.

In Chrome, search inputs (input[type=search]) show a similar button.

If you prefer to remove either of them for IE10+ and/or Chrome. You can add the style below to hide this button from the input.

See it in action... http://codepen.io/sutthoff/pen/jqqzJg

/* IE10+ */
::-ms-clear {
  display: none;
}

/* Chrome */
::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration { 
  display: none; 
}

Doyledoyley

A more verbose answer would help future readers understand better. – Faller

Answer 3

This is how I did it

input[type=text]::-ms-clear
{
    display: none;
}

Liatris

Answer 4

input::-ms-clear{
   display:none;
}

This did the trick for me.

Rid

Answer 5

Note that the style and CSS solutions don't work when a page runs in compatibility view. I'm assuming that this is because the clear button was introduced after IE7, and so the IE7 renderer used in compatibility view doesn't see ::-ms-clear as a valid style heading.

Storebought