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 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
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
::-webkit-progress-bar | Chrome Support complet 25 | Edge Support complet 79 | Firefox Aucun support Non | IE Aucun support Non | Opera Support complet 15 | Safari Support complet 6.1 | WebView Android Support complet ≤37 | Chrome Android Support complet 25 | Firefox Android Aucun support Non | Opera Android Support complet 14 | Safari iOS Support complet 7 | Samsung Internet Android Support complet 1.5 |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
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