3

I know this will be marked as a duplicate but every suggested CSS fix out there is not working for me in IE 11.

I am trying to disable an input clear 'X' in IE 11.

Among numerous others I have tried:

input::-ms-clear {
    display: none;
    height: 0;
    width: 0;
}

or, if anyone can tell me how to get that to work that would also be acceptable, but I would rather have it gone altogether.

captainKirk104
  • 177
  • 1
  • 3
  • 7
  • And, what is an "input clear 'X'"? – Scott Marcus Jan 27 '17 at 18:17
  • 1
    That should work, Make sure you're running the page in standards mode. – Teemu Jan 27 '17 at 18:17
  • 1
    Seems to work fine: https://jsfiddle.net/o55qyjsp/ The comments on [this answer](http://stackoverflow.com/a/14007839/1945651) suggest that there's no way to hide it in the Modern UI mode or in Compatibility Mode. Make sure your site isn't showing up in compatibility mode. – JLRishe Jan 27 '17 at 18:18
  • @ScottMarcus It's an icon that shows up when a text input has content in it. Clicking the X clears it. – JLRishe Jan 27 '17 at 18:19
  • Compatibility mode is off and it is still showing. Every time. – captainKirk104 Jan 27 '17 at 18:28
  • 1
    @JLRishe I lied. I had compatibility mode on. I didn't remove the tag ...meta(http-equiv= "X-UA-Compatible", content= "IE=9")... My confusion, thanks. – captainKirk104 Jan 27 '17 at 18:42

2 Answers2

5

(adding my comment from above as an answer since it turned out this was the cause of OP's issue)

Your CSS is fine:

input::-ms-clear {
    display: none;
    height: 0;
    width: 0;
}
<input type="text" />

There is no way to hide the X if the browser is running in Modern UI ("Metro") mode or if the page is rendering in Compatibility Mode.

So triple check that there's nothing in your markup that would cause the browser to use compatibility mode. If your users are using the Modern UI for some reason, there's not much you can do about that.

JLRishe
  • 99,490
  • 19
  • 131
  • 169
2

This works for me in IE 11 (IE 11 Document Mode)

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

It's slightly different than your selector which includes input. I don't see why that should make a difference, but you should try the selector as I have it (without any tag prefix).

enter image description here

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • What's the difference between this and what OP already tried? The fiddle I provided 20 minutes ago demonstrates that OP's CSS works correctly, so it's clearly not a CSS issue. – JLRishe Jan 27 '17 at 18:39
  • My selector is slightly different. Also, I didn't see your comment and fiddle. However, when I did my own testing, I found that MS's own instructions for using `::-ms-clear` didn't work. When I used this, it did. – Scott Marcus Jan 27 '17 at 18:41