::-ms-clear

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

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. Le bouton est uniquement affichés pour les champs textuels <input> non-vides et qui ont le focus.

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. MSDN documente ce pseudo-élément.

Note : Cette fonctionnalité est uniquement disponible avec IE 10-11 et a été retiré avec Microsoft Edge.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple Pas de support Pas de support 10.0 [1]
11
Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support Pas de support ? Pas de support Pas de support

[1] Dans un champ <input> mis en forme avec text-align: right, si le bouton d'effacement est affiché, il sera rogné sur le bord droit de la valeur du texte pour  <input>. Une méthode de contournement pour ce problème  workaround is to hide the clear button using display: none.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,