CSS ::-webkit-meter-even-less-good-value Pseudo-Element

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

Syntax

meter::-webkit-meter-even-less-good-value {
  background: #dc3545;
}

The pseudo-element is appended to a selector targeting an HTML <meter> element. The CSS declarations affect the filled value bar when the measurement is classified as being in the least desirable range.

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 performance score, or remaining capacity.

In addition to minimum and maximum values, a meter can define low, high, and optimum values. These attributes help the browser determine whether the current measurement is favorable or unfavorable.

When the current value is in the least desirable range, supported browsers can use ::-webkit-meter-even-less-good-value to render the filled portion of the meter.

This pseudo-element affects only the visual presentation. It does not change the measurement, its range, or how the browser classifies the value.

Understanding Meter Value Ranges

The <meter> element uses several attributes to describe the measurement and its preferred range.

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.

Consider a meter measuring disk usage. Lower usage may be preferable, while very high usage may indicate that storage is nearly full.

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

In this example, the optimum value of 20 is within the low range. The current value of 90 is within the high range, making it the least desirable measurement category.

The browser can therefore display the meter using its unfavorable-value styling. The exact default color depends on the browser and operating system.

A value is not automatically unfavorable because it is high. For measurements where higher values are preferred, the optimum range can be placed near the maximum instead.

Styling Unfavorable Values

The ::-webkit-meter-even-less-good-value pseudo-element can be used to apply a custom color to the filled portion of a meter when its value is in the least desirable range.

meter::-webkit-meter-even-less-good-value {
  background: #dc3545;
  border-radius: 5px;
}

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

These styles apply only when the browser selects the least desirable value state. A meter displaying an optimum or suboptimum measurement uses a different internal value pseudo-element.

Because the control is rendered by the browser, some styling properties may behave differently across implementations.

Example

The following example displays disk usage at 90 percent, with a red filled bar to indicate that the measurement is in the least desirable range.

HTML:

<label for="disk-usage">Disk usage: 90%</label>
<meter id="disk-usage" min="0" max="100" low="30" high="80" optimum="20" value="90">90%</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-even-less-good-value {
  background: #dc3545;
  border-radius: 5px;
}

The meter represents 90 percent disk usage. Because the optimum value is in the low range and the current value is in the high range, the browser classifies the measurement as least desirable.

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

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

WebKit and Blink implementations expose several internal pseudo-elements for styling HTML meter controls.

::-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 suboptimal but 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 selectors can be used together to assign different colors to the meter's value states.

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, this example uses green for optimum values, yellow for suboptimum values, and red for the least desirable values.

The browser determines which rule applies based on the meter's attributes and current value. The CSS rules do not determine the measurement's classification.

Accessibility Considerations

When styling meter values, preserve the meaning of the measurement for users who may not distinguish the displayed colors.

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 a measurement matters.
Maintain sufficient contrast between the track and filled portion.
Provide text explaining an unfavorable measurement rather than relying on red coloring alone.

For example, a label such as "Disk usage: 90% - Nearly full" communicates the measurement and its significance without depending entirely on color.

The <meter> element is intended for measurements within a known range. Use <progress> instead when representing the completion of an ongoing task.

Browser Support

::-webkit-meter-even-less-good-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 different internal styling mechanisms, including ::-moz-meter-bar.

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

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

Specifications

::-webkit-meter-even-less-good-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 value ranges are defined in the WHATWG HTML Living Standard .

CSS ::-webkit-meter-even-less-good-value Pseudo-Element