::-webkit-progress-bar

非标准： 此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产网站上使用它：它不会适用于所有用户。实现之间也可能存在很大的不兼容性，并且行为可能会在将来发生变化。

::-webkit-progress-bar CSS 伪元素代表 <progress> 元素的整个进度条。通常它只在进度条未填充的部分可见，因为默认情况下它是在 ::-webkit-progress-value 伪元素下方渲染的。它是 ::-webkit-progress-inner-element 伪元素的子元素，也是 ::-webkit-progress-value 伪元素的父元素。

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

语法

css

::-webkit-progress-bar {
  /* ... */
}

css

progress {
  -webkit-appearance: none;
}

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

html

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

上面的代码在使用 WebKit 或 Blink 浏览器时会生成一个看起来像这样的进度条

不属于任何标准。

BCD 表格只在浏览器中加载