CSS ::-webkit-meter-inner-element Pseudo-Element

The ::-webkit-meter-inner-element pseudo-element is a non-standard CSS extension associated with the internal rendering structure of an HTML <meter> element in WebKit and Blink-based browsers. It targets an internal container used to display the meter rather than the filled portion representing its current value.

Syntax

meter::-webkit-meter-inner-element {
  background-color: #f0f0f0;
}

The selector targets an internal part of an HTML <meter> control in browser implementations that expose this pseudo-element.

The -webkit- prefix indicates that the selector is browser-specific and is not part of the standardized CSS pseudo-element collection.

Because this internal component is controlled by the browser, the example declaration is not guaranteed to produce a visible change in every implementation.

How It Works

The HTML <meter> element represents a numeric measurement within a known range. Browsers commonly display it as a horizontal bar containing a track and a filled portion.

WebKit and Blink-based implementations use internal rendering components to construct the visual appearance of the meter.

The ::-webkit-meter-inner-element pseudo-element refers to an internal container associated with that rendering structure.

Unlike the pseudo-elements used for optimum, suboptimum, and least desirable values, this selector does not identify a particular measurement state.

Changing its CSS does not modify the meter's value, minimum, maximum, or preferred range.

Meter Rendering Structure

Several WebKit-prefixed pseudo-elements are associated with the visual components of an HTML meter control.

::-webkit-meter-inner-element - Targets an internal container associated with the meter's rendering structure.
::-webkit-meter-bar - Targets the meter's background track.
::-webkit-meter-optimum-value - Targets the filled portion when the value is in the optimum range.
::-webkit-meter-suboptimum-value - Targets the filled portion when the value is suboptimal.
::-webkit-meter-even-less-good-value - Targets the filled portion when the value is in the least desirable range.

These components serve different purposes. The inner element is associated with the control's internal layout, while the other pseudo-elements target the track or the filled value indicator.

The exact internal structure is an implementation detail and may change between browser versions.

Styling the Inner Element

The internal container can be targeted with CSS in implementations that recognize the selector.

meter {
  width: 260px;
  height: 20px;
}
meter::-webkit-meter-inner-element {
  border-radius: 6px;
  overflow: hidden;
}

The border-radius property requests rounded corners, while overflow: hidden requests clipping of content extending beyond the container.

However, the browser may ignore these declarations or handle the internal container differently from an ordinary HTML element.

For more predictable visual customization, style the meter's outer element and its track or value-state pseudo-elements instead.

Example

The following example demonstrates how the inner element can be targeted alongside the meter's background track and optimum value indicator.

HTML:

<label for="quality-meter">Quality score: 75%</label>
<meter id="quality-meter" min="0" max="100" value="75">75%</meter>

CSS:

meter {
  display: block;
  width: 260px;
  height: 20px;
}
meter::-webkit-meter-inner-element {
  border-radius: 6px;
}
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;
}

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

In supported implementations, the track and optimum value indicator can receive the specified colors and rounded corners. The additional rule targeting ::-webkit-meter-inner-element may affect the internal container, depending on the browser.

The visible result is not guaranteed to be identical in Chrome, Edge, and Safari because these controls rely on browser-specific rendering behavior.

Limitations

The ::-webkit-meter-inner-element pseudo-element has several important limitations.

It is not defined by a CSS standard.
Its availability depends on the browser's internal implementation.
Not all CSS properties are guaranteed to affect the targeted component.
The internal rendering structure may change between browser versions.
It does not provide a portable method for styling meter controls across browser engines.

For these reasons, avoid depending on this pseudo-element for essential layout or visual information.

Use the HTML <meter> element for its measurement semantics and treat browser-specific internal styling as an optional enhancement.

Cross-Browser Styling

There is no standardized CSS pseudo-element that directly replaces ::-webkit-meter-inner-element.

Firefox uses a different internal structure for meter controls and provides ::-moz-meter-bar for styling the filled portion.

When the goal is to customize the meter's dimensions and value color, use the outer <meter> element and the appropriate browser-specific value selectors.

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;
}

The WebKit-prefixed rules target the track and optimum value indicator in supported implementations. The Mozilla-specific rule targets the filled value bar in Firefox.

This approach does not guarantee identical rendering across browsers, but it avoids relying on the internal container for the primary meter styling.

Browser Support

::-webkit-meter-inner-element is a non-standard, implementation-specific pseudo-element associated with WebKit and Blink meter controls. Its current availability and styling behavior should not be assumed across all versions of Chrome, Edge, and Safari.

Firefox does not expose this selector as part of its native meter styling implementation.

The HTML <meter> element itself is widely supported, but access to its internal rendering components is browser-dependent.

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

Specifications

::-webkit-meter-inner-element is a proprietary browser implementation detail and is not defined as a standardized pseudo-element in a CSS specification.

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