::-webkit-progress-bar

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

概述

::-webkit-progress-bar CSS 伪元素 选择 <progress> 元素的未完成部分。 ::-webkit-progress-value 选择完成的部分。::-webkit-progress-bar::-webkit-progress-inner-element 伪元素的子元素,同时是 ::-webkit-progress-value 伪元素的父元素。

Note: 为了能让::-webkit-progress-value起作用,需要添加CSS -webkit-appearance 至 <progress> 元素.

规范

没有规范。这是一个 WebKit/Blink 独有的规范。

例子

CSS content

progress {
  -webkit-appearance: none;
}

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

HTML content

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

Output

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

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 未实现 (Yes) 未实现 (Yes) (Yes)
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 未实现 (Yes) 未实现 (Yes) (Yes)

参见