::-webkit-progress-value

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 ::-webkit-progress-value permet de représenter la portion « remplie » de la barre d'un élément <progress>. C'est un pseudo-élément fils du pseudo-élément ::-webkit-progress-bar.

Note : Afin que ::-webkit-progress-value ait un effet, il faut que -webkit-appearance vaille none sur l'élément <progress>.

Exemples

CSS

css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-value {
  background-color: orange;
}

HTML

html
<progress value="10" max="50"></progress>

Résultat

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

Spécifications

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi