::-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.
Browser compatibility
Loading…