::-webkit-progress-bar

非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。

::-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 浏览器时，上面的代码会生成一个如下所示的进度条

不属于任何标准。

此页面由 MDN 贡献者最后修改于 2025 年 7 月 14 日。