Styling a meter element in Safari

Question

I'm trying to style a meter element, and the traditional webkit solution works in Chrome, but doesn't seem to be working in 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>

result in chrome:

result in safari:

Link to codepen.

Answer 1

Found the media query that allows me to target safari, and set the meter appearance to none, then my styles can override default styles:

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

codepen updated

Answer 2

I found a solution: you can set the border property of the meter element to 0 (border: 0;) and suddenly it works in Safari as well. I lost almost a day to find this solution :-)

https://codepen.io/receter/pen/abqWjEN

.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;
    border: 0;
}

.my-box .meter::-webkit-meter-bar {
    background: lavender !important;
    border: none;
}

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