70

I am testing a highly-customized web application in Internet Explorer 10 on Windows 8, since it is an up and coming release, and will likely be using my application some day. Take a look at this sample screenshot of some text input controls from the application:

enter image description here

Is there a way, either within HTML or CSS, to remove the action icons that are located to the right of the text and password input controls?

Thank you for your time.

Oliver Spryn
  • 15,563
  • 30
  • 91
  • 184

7 Answers7

105

You need to use the -ms-clear pseudo-element. And use -ms-reveal for the password box.

This should do it:

  ::-ms-clear {
      display: none;
  }
Magus
  • 13,609
  • 2
  • 31
  • 47
i_am_jorf
  • 51,120
  • 15
  • 123
  • 214
  • 5
    I have to admit, that an answer, given by jeffamaphone doesn't works in IE, when it is in IE7-9 mode. But, in IE 10 it works great. – inkwai Jul 04 '12 at 14:41
  • 14
    Well, it didn't exist in IE7-9. It may be a bug that these decorators show in compatibility modes. I would have to ascend a mountain, ingest some of the local herbs, and meditate on it for a few days, and I don't have time for that. The folks at http://connect.microsoft.com/ie might, though, if you file a bug there. – i_am_jorf Jul 05 '12 at 14:13
  • Win8 IE10 for a website with a meta tag like this: also does not work. Presumably, because the :: selector isn't being interpreted. Another thread on topic here: http://answers.microsoft.com/en-us/ie/forum/ie10-windows_8/disabling-auto-clear-button-in-ie10/791c1e52-27d6-428e-80cb-206b165910d8 – jfroom Sep 13 '12 at 21:55
  • @pure_code `::` is the CSS3 prefix for pseudo-elements. http://www.w3.org/TR/css3-selectors/#pseudo-elements – Matt Ball Feb 18 '13 at 16:36
  • @pure_code read the answer we're commenting on. That's all you need. – Matt Ball Feb 18 '13 at 17:00
  • strange, I added both in, and it did nothing, are you sure it does not need a prefix like in the example?...it was placed after the html, inline, all in one file using . Does order matter? –  Feb 20 '13 at 15:36
  • I dont know why, but putting a space before ::-ms-clear helped for me – redfox05 Sep 08 '14 at 10:16
22

You should instead use this because of the reason in this answer.

/* don't show the x for text inputs */
::-ms-clear {
    width : 0;
    height: 0;
}

/* don't show the eye for password inputs */
::-ms-reveal {
    width : 0;
    height: 0;
}
Community
  • 1
  • 1
Emre
  • 677
  • 9
  • 12
5

jeffamaphone's answer works unless the browser is in compatability mode:

You need to use the -ms-clear psuedo-element. And use -ms-reveal for the password box.

This should do it:
::-ms-clear { display: none;
}

But, when the browser is in compatability mode, the reveal icon still appears. To get around this, force the browser into IE10 mode with this tag <meta http-equiv="x-ua-compatible" content="IE=edge">

MattCT
  • 51
  • 1
  • 2
  • I'm looking at a page and the only style is `::-ms-reveal { display: none; }` and I'm in compatibility mode and there is no eye (removing the style brings it back). I'm on IE10 Win7. – CWSpear Jul 02 '13 at 01:28
  • Is there any way to make it work if I'm stuck with a page that needs to be IE7 compatible ? Now the css-es are ignored (and I can still see the x). – kaczor1984 Feb 19 '15 at 10:14
2

Remove action icons from text fields in Internet Explorer 10 just use this css pseudo element

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

Remove action icons from password fields in Internet Explorer 10 just use this css pseudo element

::-ms-reveal
 {
   display: none; 
  }
Pushker Yadav
  • 776
  • 1
  • 6
  • 14
0

I don't have Windows 8 preview but have you tried just creating a custom input field using HTML and CSS? Maybe try this : http://www.webdesign4me.nl/Knowledge-Base/custom-input-field-using-html-and-css

JudeJitsu
  • 682
  • 1
  • 9
  • 17
  • The above example is of a customized text input, with its rounded corners, red border and box-shadow. The "standard" text input doesn't look that much different that it did in previous version of IE/Windows. I'm just trying to remove the action icons that I pointed out in the picture above. Unfortunately, in the link that you gave me, the Windows 8 still applies the action icon. – Oliver Spryn Jun 01 '12 at 16:07
0

The solution for IE10-docmode "standard" has been posted before.

I incidentially found some kind of workaround which is independent from IE10-docmode. If you can live with changing the width of all inputs to a maximum of 80 pixels use the following jquery:
$("input[type=text]").width(80);

Oursopodiac
  • 1
  • 2
  • I'm wondering if there's a way to do something with padding/margins that would have a similar effect. Haven't figured anything out yet. Besides "make a hidden div slide over the x" which I just won't do. – vbullinger Aug 03 '15 at 18:47
0

Perhaps not the best solution, but if any of the other solutions on this page aren't working for you, try this.

Place a blank background image on the :before of the input. More specifically - I had my own clear button styled like the website, and IE underlayed its own. I changed the original transparent PNG with my clear icon, with a solid background one.

Other browsers don't see a difference, and it blocks the IE clear button. Only works when the input background color doesn't change I suppose.

Mechow
  • 45
  • 4