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-fill est un pseudo-élément spécifique à Microsoft qui représente la partie « remplie » d'un élément <progress>. Ce pseudo-élément n'est pas standard et est uniquement disponible avec Internet Explorer 10, Internet Explorer 11 et Microsoft Edge.
Toutes les propriétés autorisées (à l'exception de animation-name) s'appliquent sur une barre de progression dans un état déterminé. Seule animation-name s'applique sur une barre dans un état indéterminée. Les éléments <progress> dans un état indéterminés sont ceux qui n'ont pas d'attribut value, ils peuvent être sélectionnés grâce à la pseudo-classe :indeterminate.
Par défaut, IE affiche un bordure avec des points qui se déplacent lorsque la barre est dans un état déterminée. En utilisant animation-name sur ::-ms-fill, on peut modifier l'animation :
| Valeur | Description |
|---|---|
none |
L'animation est désactivée, aucun point n'est affiché. |
-ms-bar |
Les points animés sont affichés sous la forme d'une barre. |
-ms-ring |
Les points animés sont affichés sous la forme d'un anneau. |
Propriétés autorisées
Seules les propriétés suivantes peuvent être utilisées avec ::-ms-fill (les autres propriétés seront ignorées) :
animation-namebackground-clip,background-color,background-image,background-origin,background-repeat,background-sizeborderborder-radiusbox-shadowbox-sizingcolorcursordisplay(avec les valeurs :block,inline-blocketnone.)fontheightmargin-ms-background-position-x-ms-background-position-y-ms-high-contrast-adjustopacityoutline-color,outline-style,outline-widthpaddingtransformettransform-originvisibility
Syntaxe
::-ms-fill
Exemples
CSS
progress::-ms-fill {
background-color: orange;
}
HTML
<progress value="10" max="50"></progress>
Résultat
Une barre de progression mise en forme avec cette feuille de style devrait ressembler à :
Spécifications
Ce pseudo-élément est spécifique à Microsoft et n'est décrit dans aucune spécification.
Compatibilité des navigateurs
No compatibility data found. Please contribute data for "css.selectors.-ms-fill" (depth: 1) to the MDN compatibility data repository.