skip to content

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

3 out of 10

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

3 out of 10

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

6 out of 10

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

9 out of 10


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:

Method of indicating the current level of a gauge.