Styling a meter element in Safari

Issue

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.

Solution

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

Answered By - NbonD