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
.