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.

Allowable Properties

Only the following CSS properties can be used in a rule with ::-ms-clear in its selector. Other properties are ignored.





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


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.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Chrome No support NoEdge Full support YesFirefox No support NoIE Full support 10
Full support 10
Notes In an <input type='text'> element styled with text-align: right, if the clear button is shown, it will clip off the right edge of the text value of the <input type='text'> element. A workaround is to hide the clear button using display: none.
Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?


Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

Document Tags and Contributors

Last updated by: mfuji09,