在Safari中设置meter元素的样式

Question

我正在尝试设置一个meter元素的样式，传统的webkit解决方案在Chrome中有效，但在Safari中似乎不起作用。

​

.my-box{
    border: 1px solid indigo;
        width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
.my-box .meter {
    width: 200px;
    height: 20px;
    position: absolute;
    bottom: -6px;
}
.my-box .meter::-webkit-meter-bar {
    background: lavender;
    border: none;
}

.my-box .meter::-webkit-meter-optimum-value {
    background: rebeccapurple
}

<div class='my-box'>
    <meter class='meter' min='0' max='1000' value='700'></meter>
</div>

​

铬的结果：

​

结果是safari：

​

Link to codepen。

Answer 1

找到允许我瞄准safari的媒体查询，并将仪表外观设置为无，然后我的样式可以覆盖默认样式：

@media not all and (min-resolution:.001dpcm) { 
    @media {
        .my-box .meter {
            -webkit-appearance: none;
            appearance: none;
        }
    }
}

codepen updated