css pseudo element

`::-moz-meter-bar` CSS pseudo-element

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

meter {
  appearance: none;
}
::-moz-meter-bar {
  /* ... */
}

Examples

HTML

Normal: <meter min="0" max="10" value="6">Score 6/10</meter>
<br />
Styled: &nbsp;&nbsp;<meter class="styled" min="0" max="10" value="6">
  Score 6/10
</meter>

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

Not part of any standard.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.