::-webkit-progress-bar

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

概述

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

备注：为了能让::-webkit-progress-value起作用，需要添加 CSS -webkit-appearance 至 <progress> 元素。

示例

CSS

css
progress {
  -webkit-appearance: none;
}

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

HTML

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

结果

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

规范

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

浏览器兼容性

BCD tables only load in the browser

参见