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 Aucun support Non | 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