首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

::-webkit-progress-value

非标准

这个功能是非标准的,不在标准轨道上。不要在面向 Web 的生产站点上使用它:它不适用于每个用户。实现之间也可能存在很大的不兼容性,并且行为在未来可能会发生变化。

::-webkit-progress-value CSS伪元素表示的条的填充的部分<progress>元件。它是::-webkit-progress-bar伪元素的孩子。

注意:为了让::-webkit-progress-value生效,-webkit-appearance需要在<progress>元素上设置none

产品规格

不是任何规格的一部分。这是 WebKit / Blink 特有的专有伪元素。

示例

HTML

代码语言:javascript
复制
<progress value="10" max="50">

CSS

代码语言:javascript
复制
progress {
? -webkit-appearance: none;
}

::-webkit-progress-value {
? background-color: orange;
}

结果

使用上述样式的进度条看起来像这样:

浏览器兼容性

Feature

Firefox (Gecko)

Chrome

Internet Explorer

Opera

Safari

Basic support

No support

(Yes)

No support

(Yes)

(Yes)

Feature

Firefox Mobile (Gecko)

Android

IE Phone

Opera Mobile

Safari Mobile

Basic support

No support

(Yes)

No support

(Yes)

(Yes)

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com