CSS ::-webkit-meter-optimum-value Pseudo-Element

The ::-webkit-meter-optimum-value pseudo-element is a non-standard CSS extension used to style the filled portion of an HTML <meter> element when its current value is within the optimum range. It allows developers to customize the appearance of favorable measurements in supported WebKit and Blink-based browsers.

Syntax

meter::-webkit-meter-optimum-value {
  background: #28a745;
}

The pseudo-element is appended to a selector targeting an HTML <meter> element. The CSS declarations affect the filled portion when the browser classifies the current measurement as optimum.

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 battery capacity, storage usage, or a performance score.

A meter can identify which measurements are preferable by using the low, high, and optimum attributes.

When the current measurement falls within the optimum range, supported browsers use the ::-webkit-meter-optimum-value pseudo-element to render the filled value bar.

The pseudo-element changes the visual presentation of the measurement. It does not modify the current value, the permitted range, or the rules used to determine whether the measurement is optimum.

The browser determines the value state from the HTML attributes, while CSS controls the appearance of that state.

Understanding Optimum Values

The <meter> element supports several attributes that describe its measurement range and preferred values.

min - Defines the minimum value of the measurement range.
max - Defines the maximum value of the measurement 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 - Identifies the preferred value or range.

For example, a battery meter may treat higher values as preferable.

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

In this example, the optimum value of 90 is within the high range. The current value of 85 is also within that range, so the measurement is classified as optimum.

The browser can display the filled portion using its optimum-value styling.

For measurements such as disk usage, lower values may be preferable. In that situation, the optimum value can be placed in the low range instead.

If the optimum attribute is omitted, the browser uses the default optimum value defined by HTML. If low and high are also omitted, the entire measurement range is treated as optimum.

Styling Optimum Values

The ::-webkit-meter-optimum-value pseudo-element can be used to customize the color and shape of the filled portion when a measurement is favorable.

meter::-webkit-meter-optimum-value {
  background: #28a745;
  border-radius: 5px;
}

The background property changes the filled portion to green, while border-radius rounds its corners.

These declarations apply to the optimum value state. Measurements classified as suboptimum or least desirable use different internal pseudo-elements.

Because the meter is a native browser control, some CSS properties may be handled differently across browser implementations.

Example

The following example creates a battery capacity meter showing 85 percent, with a gray track and a green filled portion.

HTML:

<label for="battery-level">Battery level: 85%</label>
<meter id="battery-level" min="0" max="100" low="20" high="60" optimum="90" value="85">85%</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: #28a745;
  border-radius: 5px;
}

The meter represents a value of 85 within a range from 0 to 100.

Because the optimum value is in the high range and the current value is also within that range, the browser classifies the measurement as optimum.

In supported browsers, the track appears gray and the filled portion appears green.

Changing the value attribute to a measurement outside the optimum range causes the browser to use the corresponding value-state styling instead.

Meter Value States

WebKit and Blink implementations provide separate pseudo-elements for the three desirability states of an HTML 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.

The following CSS assigns a different color to each state.

meter::-webkit-meter-optimum-value {
  background: #28a745;
}
meter::-webkit-meter-suboptimum-value {
  background: #ffc107;
}
meter::-webkit-meter-even-less-good-value {
  background: #dc3545;
}

In supported browsers, the example uses green for optimum values, yellow for suboptimum values, and red for the least desirable values.

The browser selects the appropriate internal value bar according to the meter's current value and its defined ranges.

The ::-webkit-meter-bar pseudo-element can be styled separately to control the background track.

Cross-Browser Styling

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

Chrome, Edge, and Safari support WebKit-prefixed meter selectors. Firefox provides ::-moz-meter-bar for styling the filled portion of its native meter control.

The following example applies a green value color using separate browser-specific rules.

meter {
  width: 260px;
  height: 20px;
}
meter::-webkit-meter-optimum-value {
  background: #28a745;
}
meter::-moz-meter-bar {
  background: #28a745;
}

The first pseudo-element rule targets optimum values in supported WebKit and Blink implementations. The Mozilla-specific rule targets the filled meter bar in Firefox.

Unlike the WebKit-prefixed selector, ::-moz-meter-bar does not specifically target only the optimum value state. The example therefore applies the same color to the filled bar regardless of its desirability classification in Firefox.

For consistent visual results, test the meter in each browser and consider whether native styling provides sufficient information without additional customization.

Accessibility Considerations

Custom meter styling should communicate the meaning of the measurement without depending entirely on color.

Provide a visible label identifying what the meter measures.
Use accurate min, max, and value attributes.
Define low, high, and optimum when the desirability of the measurement matters.
Maintain sufficient contrast between the background track and filled portion.
Include readable text describing the measurement rather than relying on green coloring alone.

For example, the label "Battery level: 85% - Good" communicates both the measurement and its favorable status.

The <meter> element represents a measurement within a known range. Use the HTML <progress> element instead when displaying the completion of an ongoing task.

Browser Support

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

Firefox does not use this WebKit-specific selector for its native meter controls. It provides a different internal styling mechanism through ::-moz-meter-bar.

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

For current compatibility information, visit Can I Use? and search for the HTML meter element. General meter support does not guarantee support for this specific pseudo-element.

Specifications

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

The HTML <meter> element and its measurement ranges are defined in the WHATWG HTML Living Standard .