::-ms-clear

Le pseudo-élément ::-ms-clear représente le bouton qui permet d'effacer la valeur saisie dans un champ <input>. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par Internet Explorer 10, 11 et Edge. Le bouton est uniquement affichés pour les champs textuels <input> non-vides et qui ont le focus.

Le bouton de remise à zéro est uniquement affiché pour les contrôles textuels qui ont le focus et qui ne sont pas vides. Les contrôles concernés sont :

• <input type="color">
• <input type="date">
• <input type="datetime">
• <input type="datetime-local">
• <input type="email">
• <input type="month">
• <input type="number">
• <input type="search">
• <input type="tel">
• <input type="time">
• <input type="url">
• <input type="week">

Propriétés autorisées

Seules les propriétés CSS suivantes peuvent être utilisées dans une règle qui contient ::-ms-clear dans son sélecteur (les autres propriétés seront ignorées).

Syntaxe

 selecteur::-ms-clear

Exemples

CSS

input,
label {
  display: block;
}

input[type=text]::-ms-clear {
  color: red; /* La croix du bouton sera rouge. */
  /* On peut cacher la croix avec display qui vaut "none" */
}

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>

Résultat

Voici une capture d'écran du résultat obtenu avec IE 10/11 :

Spécifications

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

Compatibilité des navigateurs