Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

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.

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support No support No support (Yes) 10.0 [1] 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 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.

Метки документа и участники

Внесли вклад в эту страницу: jameshkramer, chrisdavidmills, mfluehr, Volker-E, cvrebert, teoli, GABBAR1947, mrenty, kscarfone
Обновлялась последний раз: jameshkramer,