Internet Explorer 10 Windows 8 Remove Text Input and Password Action Icons

Question

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:

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.

Answer 1

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

Answer 2

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

Answer 3

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">

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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.