默认情况下,<progress>
标记在Firefox 50,macOS:
根据开发人员工具,<progress>
元素默认应用了以下CSS规则:
progress {
-moz-appearance: progressbar;
-moz-border-bottom-colors: threedhighlight #e6e6e6;
-moz-border-left-colors: threedshadow #e6e6e6;
-moz-border-right-colors: threedhighlight #e6e6e6;
-moz-border-top-colors: threedshadow #e6e6e6;
background-color: #e6e6e6;
border-color: -moz-use-text-color;
border-image: none;
border-style: solid;
border-width: 2px;
display: inline-block;
vertical-align: -0.2em;
}
但是,在用户文档中指定这些样式会导致以下回退渲染:
我试图用initial
替换实际值,但仍然没有运气。在稍微使用代码后,我发现应用任何影响background
,border
或border-radius
的规则会使进度条看起来非本机。
有没有办法让进度条看起来再次使用CSS?只适用于最新版Firefox的解决方案是完全可以接受的。