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

Spécifications

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

Compatibilité des navigateurs

Voir aussi

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