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