::-webkit-progress-inner-element

非标准: 该特性是非标准的,请尽量不要在生产环境中使用它!

::-webkit-progress-inner-element CSS 伪元素选择了 <progress> 元素。他是 ::-webkit-progress-bar 伪元素的父元素。

备注: 为了使 ::-webkit-progress-value 生效, <progress> 元素的-webkit-appearance 需要设置为 none

示例

HTML

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

CSS

css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}

结果

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

规范

不属于任何规范。这是 WebKit/Blink 专有的一个伪元素。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::-webkit-progress-inner-element
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.

参考