Styling the meter element

html gauge meter
html meter vs progress
html meter vertical
speed meter in html
html5 meter optimum
html5 progress element styling
html5 progress bar animation
html progress bar

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


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.

How to style HTML5 <meter> tag, I got the meter styled with a nice subtle gradient in Webkit browsers using the following code: meter { -webkit-appearance: none; } //Crucial, this will disable the​  Styling Meter Elements As with <progress> elements, the way that you style a <meter> element differs between Chrome/Safari and Firefox. You start by resetting the default appearance as you did with <progress> elements.


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;
    }
}

Styled Meter, The meter element can be styled by use of the following selectors: meter. Styling with the element selector is respected by all browsers without  The meter element, like the progress, is a non-interactive form element that is meant to indicate a current value, within a known range, much like a gauge. For example, a meter would be the semantically appropriate element to indicate the status of a finite storage limit for a DVR, email or web storage limit.


I had the same issue and this worked for me:

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

Styling Progress and Meter Elements, Minimize HTML Editor; Fold All; Unfold All. 44. 1. <div id="page-wrapper">. 2. <h1​>Progress and Meter Elements</h1>. 3. 4. <h2>Progress Elements</h2>. 5. ​. Note that the unfilled (grey) portion of the meter is styled with the ::-webkit-meter-bar in Chrome, while firefox uses ::-moz-meter-bar for the filled (green, yellow, red) part and styles the unfilled part with under the meter element it self.


Using and Styling HTML5 Meter [Guide], If you're familiar with the HTML progress bar, which shows how much of an activity has been performed, you will find that the meter element is  HTML5 Meter Element. The meter tag is useful for displaying a value within a given range and applying a style to the display to indicate how close the current value is to the optimum range. Like the progress element, meter includes min , max , and value attributes. But it also includes low , high , and optimum attributes,


::-webkit-meter-bar, This is a proprietary pseudo-element specific to WebKit/Blink. Examples. HTML. <​meter min="0"  In this section, we will only focus on styling the <meter> element. I’ll leave the styling of the rest of the markup as an exercise for you. In order to understand how to style the <meter> element, we need to peek under the hood of the browsers to deconstruct the implementation of the <meter> element.


How to use the Meter & Progress Elements, Styling Meter Elements. As with <progress> elements, the way that you style a <​meter> element differs between Chrome/Safari and Firefox  The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.