::-webkit-progress-bar

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
::-webkit-progress-bar
Non-standard
Chrome Support complet 25Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 15Safari Support complet 6.1WebView Android Support complet ≤37Chrome Android Support complet 25Firefox Android Aucun support NonOpera Android Support complet 14Safari iOS Support complet 7Samsung 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

Sujets associés
  1. CSS
  2. Référence CSS
  3. CSS Selectors
  4. Guides
    1. Utiliser la pseudo-classe :target dans un sélecteur
  5. Propriétés
    1. Liste de sélecteurs
  6. Sélecteurs simples
    1. Sélecteurs de type
    2. Sélecteurs de classe
    3. Sélecteurs d'ID
    4. Sélecteurs universels
    5. Sélecteurs d'attribut
  7. Combinateurs
    1. Combinateur de voisin direct
    2. Sélecteurs de voisins généraux
    3. Sélecteurs enfant
    4. Sélecteurs descendant
    5. Combinateur de colonne
  8. Pseudo-classes
    1. :active
    2. :any-link
    3. :checked
    4. :blank
    5. :default
    6. :defined
    7. :dir
    8. :disabled
    9. :empty
    10. :enabled
    11. :first
    12. :first-child
    13. :first-of-type
    14. :fullscreen
    15. :focus
    16. :focus-visible
    17. :focus-within
    18. :has
    19. :host()
    20. :host-context()
    21. :hover
    22. :indeterminate
    23. :in-range
    24. :invalid
    25. :is() (:matches(), :any())
    26. :lang
    27. :last-child
    28. :last-of-type
    29. :left
    30. :link
    31. :not
    32. :nth-child
    33. :nth-last-child
    34. :nth-last-of-type
    35. :nth-of-type
    36. :only-child
    37. :only-of-type
    38. :optional
    39. :out-of-range
    40. :placeholder-shown
    41. :read-only
    42. :read-write
    43. :required
    44. :right
    45. :root
    46. :scope
    47. :target
    48. :valid
    49. :visited
    50. :where()
  9. Pseudo-éléments
    1. ::-moz-progress-bar
    2. ::-moz-range-progress
    3. ::-moz-range-thumb
    4. ::-moz-range-track
    5. ::-ms-browse
    6. ::-ms-check
    7. ::-ms-clear
    8. ::-ms-expand
    9. ::-ms-fill
    10. ::-ms-fill-lower
    11. ::-ms-fill-upper
    12. ::-ms-reveal
    13. ::-ms-thumb
    14. ::-ms-ticks-after
    15. ::-ms-ticks-before
    16. ::-ms-tooltip
    17. ::-ms-track
    18. ::-ms-value
    19. ::-webkit-progress-bar
    20. ::-webkit-progress-value
    21. ::-webkit-slider-runnable-track
    22. ::-webkit-slider-thumb
    23. ::after (:after)
    24. ::backdrop
    25. ::before (:before)
    26. ::cue
    27. ::first-letter
    28. ::first-line (:first-line)
    29. ::grammar-error
    30. ::marker
    31. ::part()
    32. ::placeholder
    33. ::selection
    34. ::slotted()
    35. ::spelling-error