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 creates a clear button at the edge of an <input type="text"> text control that clears the current value. This pseudo-element is non-standard, supported only in Internet Explorer 10, Internet Explorer 11, and Microsoft Edge. The clear button is only shown on focused, non-empty text controls.
Only the following CSS properties can be used in a rule with ::-ms-clear in its selector. Other properties are ignored.
background-clipbackground-colorbackground-imagebackground-originbackground-repeatbackground-sizeborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-left-colorborder-left-styleborder-left-widthborder-right-colorborder-right-style border-right-widthborder-top-colorborder-top-left-radiusborder-top-right-radius border-top-styleborder-top-widthbox-shadowbox-sizingcolorcursordisplay (values block, inline-block, none)@font-facefont-sizefont-stylefont-weightheightmargin-bottommargin-leftmargin-rightmargin-top-ms-background-position-x-ms-background-position-y-ms-high-contrast-adjustopacityoutline-coloroutline-styleoutline-widthpadding-bottompadding-leftpadding-rightpadding-toptransformtransform-originvisibilitywidth::-ms-clear
<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>
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" */
} The following screenshot shows what the feature will look like:
Not part of any specification.
| Desktop | ||||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
| Basic support | No | Yes | No | 10
|
No | No |
| Mobile | |||||||
|---|---|---|---|---|---|---|---|
| Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | No | No | Yes | No | No | No | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear