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).
-ms-high-contrast-adjust
background-clip
background-color
background-image
background-origin
background-position-x
background-position-y
background-repeat
background-size
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-left-color
border-left-style
border-left-width
border-right-color
border-right-style
border-right-width
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
box-shadow
box-sizing
color
cursor
display
(avec les valeursblock
,inline-block
,none
)@font-face
font-size
font-style
font-weight
height
margin-bottom
margin-left
margin-right
margin-top
opacity
outline-color
outline-style
outline-width
padding-bottom
padding-left
padding-right
padding-top
transform
transform-origin
visibility
width
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
No compatibility data found. Please contribute data for "css.selectors.-ms-clear" (depth: 1) to the MDN compatibility data repository.