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

css
progress {
  -webkit-appearance: none;
}

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

HTML

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

结果

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

规范

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

浏览器兼容性

BCD tables only load in the browser

参见