::-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
参见
-
The pseudo-elements used by WebKit/Blink to style other parts of a
<progress>
element: ::-moz-progress-bar
::-ms-fill