::-webkit-progress-bar
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
Le pseudo-élément CSS ::-webkit-progress-bar est une extension de WebKit qui 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>.
Syntaxe
::-webkit-progress-bar {
/* ... */
}
Exemples
HTML
<progress value="10" max="50"></progress>
CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
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 ne fait partie d'aucun standard.
Compatibilité des navigateurs
Loading…
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