::-ms-clear

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The ::-ms-clear CSS pseudo-element represents a button (the "clear button") at the edge of a text <input> which clears away the current value of the <input> element. This button and pseudo-element are non-standard, supported only in Internet Explorer 10 and 11 and Edge 12+, hence the vendor prefix (`-ms` for Microsoft). The clear button is only shown on focused, non-empty text <input> elements.

Syntax

 selector::-ms-clear

Examples

HTML Content

<form>
   <label for="firstname">First name:</label>
   <input type="text" id="firstname" name="firstname" placeholder="First name"><br>
   <label for="lastname">Last name:</label>
   <input type="text" id="lastname" name="lastname" placeholder="Second name">
</form>

CSS Content

input,
label {
    display: block;
}
input[type=text]::-ms-clear {
    color: red; /* This sets the cross color as red. */
    /* The cross can be hidden by setting the display attribute as "none" */
}

For those of you without access to IE 10/11 or Edge 12+, the following screenshot shows what the feature will look like:

 

Specification

Not part of any specification.

Microsoft has a description on MSDN that lists out the various properties that can be set on this pseudo-element.

This feature is only available in IE 10-11, as it has been removed in the newly launched Microsoft Edge.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support No support 10.0 [1]
Edge 12+
No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support ? No support No support

[1] In a text <input> styled with text-align: right, if the clear button is shown, it will clip off the right edge of the <input>'s text value. A workaround is to hide the clear button using display: none.

Document Tags and Contributors

 Contributors to this page: Volker-E, cvrebert, teoli, GABBAR1947, chrisdavidmills, mrenty, kscarfone
 Last updated by: Volker-E,