::-webkit-progress-value

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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, -webkit-appearance needs to be set to none on the <progress> element.

Specifications

Not part of any specification. This is a proprietary pseudo-element specific to WebKit/Blink.

Example

HTML

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

CSS

progress {
  -webkit-appearance: none;
}

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

Result

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-webkit-progress-value
Non-standard
Chrome Full support 25Edge No support NoFirefox No support NoIE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 25Firefox Android No support NoOpera Android Full support 14Safari iOS Full support 7Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

See also