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-bar représente l'ensemble de la barre d'un élément <progress>. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément ::-webkit-progress-value. C'est un pseudo-élément fils du pseudo-élément ::-webkit-progress-inner-element et c'est le pseudo-élément parent du pseudo-élément ::-webkit-progress-value.
Note : Afin que ::-webkit-progress-value ait un effet, il faut que -webkit-appearance vaille none sur l'élément <progress>.
Exemples
CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
HTML
<progress value="10" max="50">
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
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | Oui | Non | Non | Non | Oui | Oui |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | Oui | Oui | Non | Non | Oui | Oui | ? |
Voir aussi
- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments
<progress>: ::-moz-progress-bar::-ms-fill