IE 10's -ms-clear pseudo-element, and IE5 quirks mode
I'm working on a legacy web app that requires use of Internet Explorer's 'IE5 Quirks Mode' (set using X-UA-Compatible: IE=5).
A number of text fields in the app have (app-generated) 'x' buttons to clear the content. In IE10, IE also generates an 'x' button to clear the field, so the user sees two of them.
As discussed in this question, you can remove the IE-generated 'x' using the ::-ms-clear CSS pseudo-element. Unfortunately, this appears not to work in IE5 Quirks Mode: styling of the ::-ms-clear pseudo-element shows up in the developer tools as :unknown, and the IE-generated 'x' continues to appear.
Aside from rewriting the app to use a modern browser mode, is there any way to get rid of the IE-generated 'x'?
Following is a test page that reproduces the problem in IE5 Quirks Mode when run under IE10:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=5">
<style type="text/css">
::-ms-clear { width: 0; height: 0; }
</style>
</head>
<body>Enter some text:<input></body>
</html>
Answer
Try
input::-ms-clear { display: none; }
Or
input::-ms-clear { visibility: hidden; }
A hackier hack might be to use the margin-right and overflow properties
input { margin-right: -20px; overflow: hidden }