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
| Ordinateur | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Webview Android | Chrome pour Android | Edge Mobile | Firefox pour Android | Opera pour Android | Safari pour iOS | Samsung Internet | |
| Support simple | Chrome Support complet Oui | Edge Aucun support Non | Firefox Aucun support Non | IE Aucun support Non | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Aucun support Non | Firefox Android Aucun support Non | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- 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