::-webkit-progress-value

非标准
该特性是非标准的，请尽量不要在生产环境中使用它！

::-webkit-progress-value CSS 伪元素 代表的是<progress> 元素中进度条未完成的部分。它是::-webkit-progress-bar 伪元素的子元素。

注意: 为了使 ::-webkit-progress-value 生效， <progress> 元素的-webkit-appearance 需要设置为 none 。

说明

不属于任何规范。这是WebKit/Blink专有的一个伪元素。

示例

HTML

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

CSS

progress {
  -webkit-appearance: none;
}

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

Result

应用了上述样式的进度条如下：

浏览器兼容性

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 Full support 79Firefox 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 Full support 1.5

Legend

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

参见