Styling the meter element

Issue

I'm using the meter element to display a star rating from 0 - 5. I got it to work great on Chrome, sort of okay in Firefox, but can't quite get it to work properly in Safari.

Here is a codepen

For Safari, to properly display the styled meter, I have to add

 meter {
   -webkit-appearance: none;
}

And then everything works. However, once doing that, it ceases to work in Chrome because Chrome will just render the content within the meter and cease to show it completely. Has anyone gotten around this?

P.S. Also, does anyone know why I can't set it like this:

&::-webkit-meter-bar,
&::-webkit-meter-optimum-value,
&::-moz-meter-bar {
    //code here
  }

And instead have to break it up?

&::-webkit-meter-bar,
&::-webkit-meter-optimum-value {
   //code here
}

&::-moz-meter-bar {
   // code here
} 

Much appreciated if anyone has any insight :)

Solution

I have gone with a hacky way to target only Safari. This allows my styled meter to work across Firefox, Safari and Chrome. Have not managed to figure out why I need to separate the -webkit and -moz styles. Perhaps in the future when all the browsers implement the element in the same way things will be better.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
    meter:not(:root:root) {
         appearance: none;
    }
}

Answered By - sammiepls