::-ms-fill

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 :

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 et none.)
• font
• height
• margin
• -ms-background-position-x
• -ms-background-position-y
• -ms-high-contrast-adjust
• opacity
• outline-color, outline-style, outline-width
• padding
• transform et transform-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 à :

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Spécifications

Ce pseudo-élément est spécifique à Microsoft et n'est décrit dans aucune spécification.

Voir aussi

• ::-moz-progress-bar
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element