View in English Always switch to English

::-webkit-progress-bar

非标准: 该特性尚未标准化。我们不建议在生产环境中使用非标准特性,因为它们在浏览器中的支持有限,且可能发生变化或被移除。不过,在没有标准选项的特定情况下,它们可以作为合适的替代方案。

概述

::-webkit-progress-bar CSS 伪元素选择 <progress> 元素的未完成部分。 ::-webkit-progress-value 选择完成的部分。::-webkit-progress-bar 是::-webkit-progress-inner-element 伪元素的子元素,同时是 ::-webkit-progress-value 伪元素的父元素。

备注: 为了能让::-webkit-progress-value起作用,需要添加 CSS -webkit-appearance 至 <progress> 元素。

css

progress {
 -webkit-appearance: none;
}
::-webkit-progress-bar {
 background-color: orange;
}

html

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

应用了上述样式的进度条样式如下:

没有规范。这是一个 WebKit/Blink 独有的规范。

This page was last modified on ⁨2025年7月15日⁩ by MDN contributors.