59

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?

IE10 Clear Button

Josh Schultz
  • 8,000
  • 9
  • 32
  • 39
  • They keep adding and adding stuff... Good idea, but... – David Bélanger Nov 20 '12 at 20:31
  • 2
    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... – VirtuosiMedia Feb 08 '13 at 12:23
  • 4
    Not in the spec so it shouldn't be there – lededje Apr 01 '13 at 14:45
  • 3
    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. – David Masters Apr 02 '14 at 08:45
  • Possible duplicate of [Remove IE10's "clear field" X button on certain inputs?](https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs) – HamedH Jul 23 '17 at 10:16

5 Answers5

134
input[type=text]::-ms-clear {
    display: none;
}
Josh Schultz
  • 8,000
  • 9
  • 32
  • 39
  • 1
    Great, thanks! Are there similar methods available for other form elements? – Peter Smeekens Dec 05 '12 at 13:04
  • 19
    FYI: This only works only when the browser is IE10 mode and not compatibility mode. grrr!! – JT... Feb 01 '13 at 05:59
  • So annoying that this is the case. Compat mode should strip them out... ARGH! – lededje Apr 01 '13 at 14:45
  • 1
    Does anyone know, how to fix this for IE9? – ManJan Aug 09 '13 at 15:15
  • 2
    @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. – Paul D. Waite Oct 10 '13 at 10:30
  • 3
    It's better to set the `width` and `height` to `0px`. Otherwise, IE10 ignores the padding defined on the field: https://stackoverflow.com/a/14739092/3163075 – Anima-t3d Dec 05 '17 at 08:26
  • Effective as it can be used in global css. – mintedsky Apr 20 '18 at 22:46
18

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; 
}
Sutthoff
  • 181
  • 1
  • 4
2

This is how I did it

input[type=text]::-ms-clear
{
    display: none;
}
Tunaki
  • 132,869
  • 46
  • 340
  • 423
Amit Mhaske
  • 471
  • 5
  • 10
2
input::-ms-clear{
   display:none;
}

This did the trick for me.

Mo.
  • 26,306
  • 36
  • 159
  • 225
stacksonstacksonstacks
  • 687
  • 7
  • 12
1

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.

Tom Wilson
  • 99
  • 3