::-moz-meter-bar
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The ::-moz-meter-bar CSS pseudo-element represents the meter gauge in a <meter> element. It is used for selecting and applying styles to the gauge inside a meter element.
Note: By default, the <meter> element uses native styling. To apply your own styles, first set appearance: none on the <meter> element, and then style using ::-moz-meter-bar.
Syntax
css
meter { appearance: none; } ::-moz-meter-bar { /* ... */ } Examples
HTML
html
Normal: <meter min="0" max="10" value="6">Score 6/10</meter> <br /> Styled: <meter class="styled" min="0" max="10" value="6"> Score 6/10 </meter> CSS
css
meter { height: 20px; width: 200px; vertical-align: -0.4rem; } .styled { appearance: none; } .styled::-moz-meter-bar { background: lime; box-shadow: 0 2px 3px grey inset; border-radius: 5px; } Result
Specifications
Not part of any standard.