HTML <meter> Tag
This week's article in the installment "what's that weird html tag?",
takes a look at the <meter> tag.
The <meter> element represents a scalar measurement within a known range, for example disk usage.
It should not be used to create progress bars or in any other way indicate progress. Use the progress bar element instead.
Styling
There are five pseudo classes you can use for styling the meter element -webkit-meter-inner-element -webkit-meter-bar -webkit-meter-optimum-value -webkit-meter-suboptimum-value -webkit-meter-even-less-good-value
-webkit-meter-inner-element
Additional markup to render the meter element as read-only.
-webkit-meter-bar
The meter bar container. This is used for styling the meter element.
<meter min="0" max="10" value="3">3 out of 10</meter>
meter::-webkit-meter-bar {
background: salmon;
}
-webkit-meter-optimum-value
This is the current value of the meter. It's green by default when the value falls within the low-high range.
<meter min="0" max="10" value="3" optimum="0">3 out of 10</meter>
meter::-webkit-meter-optimum-value {
background: green;
}
-webkit-meter-suboptimum-value
Gives a yellow color to the meter element when the value attribute falls outside the low-high range.
<meter min="0" max="10" value="6" optimum="0" low="5">6 out of 10</meter>
meter::-webkit-meter-suboptimum-value {
background: yellow;
}
-webkit-meter-even-less-good-value
Gives a red color to the meter element when the value and the optimum attributes fall outside the low-high range but in opposite zones. For example, value < low < high < optimum or value > high > low > optimum
<meter min="0" max="10" value="9" optimum="0" low="5" high="8">
9 out of 10
</meter>
meter::-webkit-meter-suboptimum-value {
background: red;
}
Example
See the Pen Meter HTML Test by Tristan White (@triss90) on CodePen.
Browser Support
The <meter> tag is widely supported, only lacking support on IE and IE Mobile: