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

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.

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

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

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

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

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

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

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.