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

The ::-webkit-meter-suboptimum-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 outside the optimum range but is not in the least desirable range. It allows developers to customize the appearance of moderately unfavorable measurements in supported WebKit and Blink-based browsers.

Syntax

meter::-webkit-meter-suboptimum-value {
  background: #ffc107;
}

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 suboptimum.

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 preferred and less desirable measurements using the low, high, and optimum attributes.

When the current value is outside the optimum range but has not reached the least desirable range, supported browsers can use ::-webkit-meter-suboptimum-value to render the filled value bar.

This pseudo-element changes the visual appearance of the measurement. It does not modify the meter's current value or determine which measurements are considered desirable.

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

Understanding Suboptimum Values

The <meter> element supports several attributes that define 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="45">45%</meter>

In this example, the optimum value of 90 is in the high range. The current value of 45 is between the low and high boundaries.

Because the measurement is outside the optimum range but is not in the least desirable range, the browser classifies it as suboptimum.

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

A suboptimum value does not necessarily indicate a problem. It means the measurement is less desirable than the optimum range according to the boundaries defined by the HTML attributes.

Styling Suboptimum Values

The ::-webkit-meter-suboptimum-value pseudo-element can be used to customize the filled portion of a meter when its measurement is moderately unfavorable.

meter::-webkit-meter-suboptimum-value {
  background: #ffc107;
  border-radius: 5px;
}

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

Yellow is commonly used to indicate a cautionary or intermediate state, but developers can choose other colors appropriate for their design.

These declarations apply only when the browser selects the suboptimum value state. Optimum and least desirable measurements use different internal pseudo-elements.

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

Example

The following example creates a battery meter showing 45 percent capacity, with a gray track and a yellow filled portion to indicate a suboptimum measurement.

HTML:

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

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

Because the optimum value is in the high range and the current value is in the middle range, the browser classifies the measurement as suboptimum.

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

Changing the value attribute to 85 would place the measurement in the optimum range. Changing it to 10 would place the measurement in the least desirable range.

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 customize 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 yellow value color using separate browser-specific rules.

meter {
  width: 260px;
  height: 20px;
}
meter::-webkit-meter-suboptimum-value {
  background: #ffc107;
}
meter::-moz-meter-bar {
  background: #ffc107;
}

The WebKit-prefixed rule targets suboptimum values in supported 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 suboptimum value state. The example therefore applies the same color to the filled bar regardless of its desirability classification in Firefox.

For consistent results, test the meter in each supported browser and verify that its visual appearance communicates the intended measurement state.

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 explaining the measurement rather than relying on yellow coloring alone.

For example, the label "Battery level: 45% - Moderate" communicates both the measurement and its intermediate 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-suboptimum-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-suboptimum-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 .