How to hide the Clear button in Internet Explorer 10

Warning

The retired, out-of-support Internet Explorer 11 desktop application has been permanently disabled through a Microsoft Edge update on certain versions of Windows 10. For more information, see Internet Explorer 11 desktop app retirement FAQ.

This article provides a solution for hiding clear buttons in Internet Explorer 10.

Original product version:   Internet Explorer 9 and later versions
Original KB number:   2813492

Summary

Windows Internet Explorer 10 introduces a new Clear button for text input fields. This button will be displayed in all rendering modes, but only if the text input control has focus and is not empty. Once pressed, the input field gets cleared.

There is also a new associated pseudo-element called ::-ms-clear . This pseudo-element applies one or more styles to the Clear button. The following code example demonstrates how you can use this pseudo-element to hide the Clear button:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            ::-ms-clear {
            ;
            }
        </style>
    </head>
    <body>
        <input type="text" />
    </body>
</html>

The above code works as expected in Internet Explorer 10 Document Mode.

More information

The current design is that the Clear button will be displayed in all Internet Explorer 10 Document Modes, but styles can only be applied in Internet Explorer 10 Standard Document Mode.