'Styling the meter element

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 :)

htmlcss


Solution 1:[1]

I can not test on Safari

But I would try the following (It works in Chrome, at least)

meter {
    -webkit-appearance: none;
    -webkit-appearance: meter;
}

Chrome has a built-in style of meter.

That's why when you set none it stops to work. Hopefully, Safari will understand none, won't understand meter and will keep the first style.

Solution 2:[2]

I had the same issue and this worked for me:

 -webkit-appearance: meter;
  -moz-appearance: none;
  appearance: none;

Solution 3:[3]

If you set border-color: transparent for the meter element it works in Safari, don’t ask me why.

Here is a working Codepen for your example:

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

Edit: border: 0; works as well and is probably better.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vals
Solution 2 Johnatan Uribe
Solution 3

Related Questions