Auto clear button for Textboxes in IE 10 (Win 8)

Internet Explorer is improved and come back with more features from  IE 9. Started supporting SVG, BASE64 image, CANVAS and many more features. Now, IE 10 developer preview is comes with windows 8 developer preview.

Internet-Explorer (IE) 10

This version having more features than existing IE9. IE 10 automatically adding clear button at end of the text box (just “X” mark). When we click on “X” mark it will clear the entered text. This clear button displaying only when we focus on textbox to start enter something..

Hopefully,  it is very helpful when we work with touch devices (Windows tablets and Windows 8 with touch screens).

Here we can see few screen shots which I taken while typing in bing.com and gmail.com and my blog…

clear button in IE10 Windows 8

More interesting updates on the way… keep watching..

Update on March 20,2012 :

How to remove auto clear button in Text box in IE 10 :

A Web developer can hide clear button using the CSS pseudo-class “::-ms-clear” and setting style “display” to “none”. For example,

input[type=text]::-ms-clear { display: none; }

more details here : http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx

Special thanks to Scott Hanselman and Rey  Bango!

  • Garrett Reimer

    Any idea if there is CSS to remove the X?

    • Hi Reimer,

      I can’t say my Idea works for you prefect, please try in this way.
      Place a text box inside a div. Set width to div for example 350px and also overflow:hidden. So, your CSS for this text box wrapper div is
      div {overflow:hidden;width:350px;}

      Now just apply width to text box some thing like {width:400px;}. may be this hide that remove(x) mark.

      Thank

      • Garrett Reimer

        Thanks Naga.

        I originally tried this. It works, but makes the dom more complex than necessary.
        I thought there might be an IE-specific CSS rule to hide it.

        Garrett

        • Thanks for Get back to me! Reimer. Yes, my ideas will add one more extra DIV tag 🙁

          I will try to find out the hide rule for this. If you got a solution, Please let me know.

          Thanks again!

        • Hi Reimer,

          Check with this code

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

          I got solution for Scott and Rey.

  • Hùng Phạm Ngọc

    If textbox has align = right, i thing clear button should put on the left.

    • Yes, but not for align=right. We need to use DIR attribute like this <input type="text" dir=”rtl”/>

  • Wez Hind

    Thanks Microsoft. Yet ANOTHER fecking ‘useless’ invention we have to code round! SO now I’ve got to go back to every page I’ve ever written and apply this class to stop it! If I’d wanted people to be able to auto-clear, I’d have put an x next to the textbox myself!! Internet Explorer needs to die, if they’re gonna keep pulling this kinda shit!

    • This is a feature built specifically with the user in mind. This is a great feature.

      • Yes, this is great feature. Agree with you @dotnetchris:disqus

  • Mukesh

    It should be configurable…why I am being forced to use this feature if I don’t want for my app

    • @Mukesh I agree with you. But this is default behavior of OS.