::-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 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. This includes inputs that appear text-like or fall back to type="text". Such inputs include:

Allowable Properties

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

Syntax

::-ms-clear

Example

HTML

<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

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" */
}

Result

The following screenshot shows what the feature will look like:

 

Specifications

Not part of any specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-ms-clear
Non-standard
Chrome No support NoEdge Full support 12
Notes
Full support 12
Notes
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.
Firefox No support NoIE Full support 10
Notes
Full support 10
Notes
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 NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?

Legend

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.