::-webkit-progress-bar - CSS（层叠样式表） 编辑

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

概述

::-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!

• Desktop
• Mobile

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)

参见

• The pseudo-elements used by WebKit/Blink to style other parts of a <progress> element:
  • ::-webkit-progress-value
  • ::-webkit-progress-inner-element
• ::-moz-progress-bar
• ::-ms-fill