Firefox Tomorrow

css pseudo element

`::-webkit-progress-value` CSS pseudo-element

View on MDN ↗

The ::-webkit-progress-value CSS pseudo-element represents the filled-in portion of the bar of a <progress> element. It is a child of the ::-webkit-progress-bar pseudo-element.

[!NOTE] In order to let ::-webkit-progress-value take effect, appearance needs to be set to none on the <progress> element.

Syntax

::-webkit-progress-value {
  /* ... */
}

Examples

This example will only work in browsers based on Blink or WebKit.

HTML

<progress value="10" max="50"></progress>

CSS

progress {
  -webkit-appearance: none;
}

::-webkit-progress-value {
  background-color: orange;
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Result screenshot

A progress bar using the style above would look like this:

A long orange and grey box. The left 20% is orange. The right 80% is grey.

Specifications

Not part of any standard.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also