如何将<progress>重置为原生外观?

时间:2016-12-06 00:47:10

标签: html css html5 css3

默认情况下,<progress>标记在Firefox 50,macOS:

上看起来像这样

Progress bar with no style on Firefox 50, macOS 10.11

根据开发人员工具,<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;
}

但是,在用户文档中指定这些样式会导致以下回退渲染:

Progress bar with default style on Firefox 50, macOS 10.11

我试图用initial替换实际值,但仍然没有运气。在稍微使用代码后,我发现应用任何影响backgroundborderborder-radius的规则会使进度条看起来非本机。

有没有办法让进度条看起来再次使用CSS?只适用于最新版Firefox的解决方案是完全可以接受的。

0 个答案:

没有答案