How can I disable the clear button that IE10 inserts into textboxes?
CssFormsInternet Explorer-10Css Problem Overview
How can I disable the new functionality in Internet Explorer 10 that shows a little 'x' in a textbox when it's focused and I have content in it?
Css Solutions
Solution 1 - Css
input[type=text]::-ms-clear {
display: none;
}
Solution 2 - Css
In IE 10+, text inputs (input[type=text]) show a (x) button on the right-side on the field once you start typing, it's used to clear/remove the entered text value.
In Chrome, search inputs (input[type=search]) show a similar button.
If you prefer to remove either of them for IE10+ and/or Chrome. You can add the style below to hide this button from the input.
See it in action... http://codepen.io/sutthoff/pen/jqqzJg
/* IE10+ */
::-ms-clear {
display: none;
}
/* Chrome */
::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
display: none;
}
Solution 3 - Css
This is how I did it
input[type=text]::-ms-clear
{
display: none;
}
Solution 4 - Css
input::-ms-clear{
display:none;
}
This did the trick for me.
Solution 5 - Css
Note that the style and CSS solutions don't work when a page runs in compatibility view. I'm assuming that this is because the clear button was introduced after IE7, and so the IE7 renderer used in compatibility view doesn't see ::-ms-clear as a valid style heading.