CSS ::-webkit-meter-bar Pseudo-Element

The ::-webkit-meter-bar pseudo-element is a non-standard CSS extension used to style the background track of an HTML <meter> element in WebKit and Blink-based browsers. It allows developers to customize the meter's track separately from the filled portion representing its current value.

Syntax

meter::-webkit-meter-bar {
  background: #e0e0e0;
}

The pseudo-element is appended to a selector targeting an HTML <meter> element. The CSS declarations affect the background track of the meter in browsers that recognize the selector.

The -webkit- prefix identifies a browser-specific extension rather than a standardized CSS pseudo-element.

How It Works

The HTML <meter> element represents a measurement within a known range, such as storage usage, a test score, or battery capacity.

Browsers typically display a meter as a horizontal bar containing a background track and a filled portion that represents the current measurement.

The ::-webkit-meter-bar pseudo-element targets the meter's background track in supported WebKit and Blink implementations.

Changing the track's appearance does not modify the meter's value or the boundaries of its measurement range. Those values are controlled by HTML attributes.

Because the meter is a native browser control, its exact appearance can vary between browsers and operating systems.

Meter Components

WebKit and Blink implementations expose several internal pseudo-elements for styling different parts of an HTML meter control.

::-webkit-meter-bar - Styles the background track of the meter.
::-webkit-meter-optimum-value - Styles the filled portion when the measurement is in the optimum range.
::-webkit-meter-suboptimum-value - Styles the filled portion when the measurement is outside the optimum range but is not in the least desirable range.
::-webkit-meter-even-less-good-value - Styles the filled portion when the measurement is in the least desirable range.

These pseudo-elements allow the track and the different value states to receive separate styling.

The ::-webkit-meter-inner-element pseudo-element is another browser-specific internal part associated with the meter's rendering structure.

Styling the Meter Track

Common CSS properties used with ::-webkit-meter-bar include background, border, border-radius, and box-shadow.

meter {
  width: 260px;
  height: 20px;
}
meter::-webkit-meter-bar {
  background: #e0e0e0;
  border: 1px solid #aaa;
  border-radius: 6px;
  box-shadow: none;
}

The width and height properties set the overall dimensions of the meter control.

The background property changes the track color, while border and border-radius define its outline and rounded corners.

The box-shadow: none declaration removes any shadow applied to the targeted track by the browser's default styling.

Native control styling may affect how these properties are rendered, so test the result in the browsers you intend to support.

Example

The following example creates a meter showing 65 percent storage usage, with a gray background track and a blue filled portion in supported browsers.

HTML:

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

CSS:

meter {
  display: block;
  width: 260px;
  height: 20px;
}
meter::-webkit-meter-bar {
  background: #e0e0e0;
  border: 1px solid #aaa;
  border-radius: 6px;
  box-shadow: none;
}
meter::-webkit-meter-optimum-value {
  background: #0066cc;
  border-radius: 5px;
}

In supported browsers, the meter displays a gray track with a blue filled portion representing 65 percent of the available range.

Because the example does not define low, high, or optimum attributes, the measurement is treated as being in the optimum range.

The ::-webkit-meter-bar selector styles the background track, while ::-webkit-meter-optimum-value styles the filled portion.

Meter Value States

The HTML <meter> element supports attributes that help browsers interpret whether a measurement is desirable.

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

For example, a storage meter might treat lower usage as preferable.

<meter min="0" max="100" low="30" high="80" optimum="20" value="90">90%</meter>

In this example, the value of 90 is in the high range, while the optimum value is in the low range. The browser can therefore identify the measurement as being in the least desirable range.

The background track remains associated with ::-webkit-meter-bar, while the filled portion can use a different internal pseudo-element based on the current value state.

When customizing these colors, make sure users can still distinguish favorable and unfavorable measurements.

Cross-Browser Styling

Different browser engines expose different internal pseudo-elements for HTML meter controls.

Chrome, Edge, and Safari support WebKit-prefixed meter selectors, while Firefox provides ::-moz-meter-bar for styling its filled meter bar.

The following CSS demonstrates separate rules for these browser-specific implementations.

meter {
  width: 260px;
  height: 20px;
}
meter::-webkit-meter-bar {
  background: #e0e0e0;
  border-radius: 6px;
}
meter::-webkit-meter-optimum-value {
  background: #0066cc;
}
meter::-moz-meter-bar {
  background: #0066cc;
}

In WebKit and Blink implementations, the first two pseudo-element rules style the track and optimum value bar separately. In Firefox, the Mozilla-specific rule targets the filled meter bar.

These selectors do not provide identical control over every internal component, so the finished appearance may differ between browsers.

For consistent presentation, test the meter in each supported browser rather than assuming the same CSS declarations will produce identical results.

Accessibility Considerations

Custom meter styling should preserve the meaning of the measurement and make the control easy to understand.

Provide a visible label describing what the meter measures.
Use the appropriate min, max, and value attributes.
Include low, high, and optimum when the desirability of the measurement matters.
Maintain sufficient contrast between the background track and filled portion.
Do not rely on color alone to communicate whether a value is favorable or unfavorable.

The <meter> element is intended for measurements within a known range. For tracking the completion of an ongoing task, use the HTML <progress> element instead.

Browser Support

::-webkit-meter-bar is a non-standard browser-specific pseudo-element recognized by WebKit and Blink implementations, including Safari, Chrome, and Edge.

Firefox does not use this pseudo-element for its meter track. It provides different internal styling mechanisms, including ::-moz-meter-bar for the filled portion.

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

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

Specifications

::-webkit-meter-bar is a proprietary browser extension and is not defined as a standardized pseudo-element in a CSS specification.

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