This translation is incomplete. Please help translate this article from English



::-webkit-progress-bar CSS 伪元素 表示 <progress> 元素的整个条形. 通常在条形值没有达到满值时可以见到,::-webkit-progress-value 伪元素代表值的条形.::-webkit-progress-bar::-webkit-progress-inner-element伪元素的子元素,同时是::-webkit-progress-value 伪元素的父级元素。

Note: 为了能让::-webkit-progress-value起作用, -webkit-appearance 需要添加至 <progress> 元素.


Not part of any specification. This is a proprietary pseudo-element specific to WebKit/Blink.


CSS content

progress {
  -webkit-appearance: none;

::-webkit-progress-bar {
   background-color: orange;

HTML content

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


A progress bar using the style above would look like this:

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 未实现 (Yes) 未实现 (Yes) (Yes)
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 未实现 (Yes) 未实现 (Yes) (Yes)

See also