Html 如何重置<；进步>；为了自己的外表？

默认情况下，Firefox 50、macOS上的标签如下所示：

根据开发者工具，

元素默认应用以下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;
}

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

我试图用

初始值

替换实际值，但仍然没有成功。在玩了一点代码之后，我发现应用任何影响

背景

、

边框

或

边框半径

的规则都会使进度条看起来不是本地的

---

有没有什么方法可以让进度条在使用CSS时看起来像本地的？只在最新版本的Firefox上运行的解决方案是完全可以接受的。

如果您只想让它原生，那么为什么要首先设置它的样式？@junkfoodjunkie，我正在从userscript注入一个进度条，目标页面已经重置了进度条，但没有正确设置样式。为什么要首先设置它的样式，如果你只想让它原生？@junkfoodjunkie，我正在从userscript注入一个进度条，目标页面已经重置了进度条，但没有正确设置样式。