::-webkit-progress-value

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

::-webkit-progress-value CSS 伪元素 代表 <progress> 元素条形的填充部分。它是 ::-webkit-progress-bar 伪元素的子元素。

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

语法

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

示例

此示例仅在基于 Blink 或 WebKit 的浏览器中有效。

HTML

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

CSS

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.

规范

不属于任何标准。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见