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-name
background-clip
,background-color
,background-image
,background-origin
,background-repeat
,background-size
border
border-radius
box-shadow
box-sizing
color
cursor
display
(avec les valeurs :block
,inline-block
etnone
.)font
height
margin
-ms-background-position-x
-ms-background-position-y
-ms-high-contrast-adjust
opacity
outline-color
,outline-style
,outline-width
padding
transform
ettransform-origin
visibility
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.