::-webkit-progress-value

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

::-webkit-progress-value CSS 伪元素表示 <progress> 元素的进度条中已填充的部分。它是 ::-webkit-progress-bar 伪元素的子元素。

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

语法

css

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

此示例仅适用于基于 Blink 或 WebKit 的浏览器。

html

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

css

progress {
  -webkit-appearance: none;
}

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

使用上述样式构建的进度条将如下所示：

A long orange and grey box. The left 20% is orange. The right 80% is grey.

不属于任何标准。

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