非标准
该特性是非标准的,请尽量不要在生产环境中使用它!
注意: 为了使 ::-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
应用了上述样式的进度条如下:
浏览器兼容性
BCD tables only load in the browser
参见
- WebKit/Blink使用的用来修改
<progress>
元素其他部分样式的伪元素: ::-moz-progress-bar
::-ms-fill