CSS ::-moz-meter-bar Pseudo-Element

The ::-moz-meter-bar pseudo-element is a non-standard Mozilla CSS extension used to style the value bar inside an HTML <meter> element in Firefox. It allows developers to customize the bar's appearance separately from the surrounding meter control.

Syntax

meter::-moz-meter-bar {
  background-color: #28a745;
}

The pseudo-element is appended to a selector targeting an HTML <meter> element. The declarations affect the filled value bar in Firefox rather than the entire meter control.

The -moz- prefix indicates that this is a Mozilla-specific feature and not a standardized CSS pseudo-element.

How It Works

The HTML <meter> element represents a scalar measurement within a known range, such as disk usage, a rating, or a score. Browsers typically display this measurement as a horizontal bar.

The meter contains a track and a filled portion that represents its current value. Firefox exposes the filled portion through ::-moz-meter-bar.

Styling the pseudo-element changes the appearance of the value bar without changing the meter's numeric value or its minimum and maximum limits.

The actual appearance may vary depending on the browser, operating system, and native control styling.

Understanding Meter Values

The <meter> element supports several attributes that control how the measurement is interpreted.

min - Defines the minimum value of the range.
max - Defines the maximum value of the range.
value - Specifies the current measurement.
low - Defines the upper boundary of the low range.
high - Defines the lower boundary of the high range.
optimum - Indicates the preferred value or range.

Browsers can use these values to distinguish measurements that are optimal, suboptimal, or less desirable. Default colors may change according to the current measurement.

Custom styling can override the browser's visual indicators, so preserve meaningful distinctions when changing meter colors.

Styling the Meter Bar

Use ::-moz-meter-bar to apply visual styles to the filled portion of a meter in Firefox.

meter {
  width: 240px;
  height: 20px;
}
meter::-moz-meter-bar {
  background: #0066cc;
  border-radius: 4px;
}

The width and height properties size the meter control, while the pseudo-element changes the value bar's background and rounded corners.

Not all CSS properties are guaranteed to affect the internal parts of native form controls. Test the result in Firefox before relying on a particular appearance.

Example

The following example displays a meter representing 65 percent of a storage allocation.

HTML:

<label for="storage-meter">Storage used: 65%</label>
<meter id="storage-meter" min="0" max="100" value="65">65%</meter>

CSS:

meter {
  display: block;
  width: 240px;
  height: 20px;
}
meter::-moz-meter-bar {
  background: #0066cc;
  border-radius: 4px;
}

In Firefox, the meter displays a filled bar representing the current value. The Mozilla-specific selector attempts to give that bar a blue background and rounded corners.

Other browsers ignore ::-moz-meter-bar and use their own native meter styling unless separate browser-specific rules are provided.

Browser Support

::-moz-meter-bar is a non-standard Mozilla-specific pseudo-element supported by Firefox. It is not a cross-browser CSS feature.

Chrome, Edge, and Safari use different internal implementations for HTML meter controls, including WebKit-prefixed pseudo-elements in some browsers.

The HTML <meter> element itself is widely supported, but styling its internal value bar is browser-dependent.

For current compatibility information, visit Can I Use? and search for the HTML meter element.

Specifications

::-moz-meter-bar is a proprietary Mozilla extension and is not defined in a standard CSS specification.

The HTML <meter> element is defined in the WHATWG HTML Living Standard .