::-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 日修改。