::-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 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 :

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
::-ms-clear
Non-standard
Chrome Aucun support NonEdge Support complet 12
Notes
Support complet 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 Aucun support NonIE Support complet 10
Notes
Support complet 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 Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.