`::-webkit-meter-bar` CSS pseudo-element

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The ::-webkit-meter-bar CSS pseudo-element is a WebKit extension that represents the background of a <meter> element. It is used for selecting and applying styles to the container of a meter gauge.

Syntax

css

::-webkit-meter-bar {
  /* ... */
}

Examples

HTML

html

Normal: <meter min="0" max="10" value="6">Score 6/10</meter>
<br />
Styled: &nbsp;&nbsp;<meter id="styled" min="0" max="10" value="6">
  Score 6/10
</meter>

CSS

meter {
  height: 30px;
  width: 200px;
  vertical-align: -0.8rem;
}

css

.safari meter {
  /* Reset the default appearance for Safari only */
  /* .safari class is added via JavaScript */
  -webkit-appearance: none;
}

#styled::-webkit-meter-bar {
  background: lime;
  box-shadow: 0 10px 20px grey inset;
  border-radius: 10px;
}

JavaScript

// Safari requires <meter> elements to have an `appearance` of `none` for custom styling
// using `::-webkit-meter-*` selectors, but `appearance: none` breaks rendering on Chrome.
// Therefore, we must check if the browser is Safari-based.

const isSafari =
  navigator.userAgent.includes("AppleWebKit/") &&
  !navigator.userAgent.includes("Chrome/");

if (isSafari) {
  document.body.classList.add("safari");
}

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`::-webkit-meter-bar` Deprecated Non-standard	Chrome – Full support Chrome 12 (Release date: 2011-06-07) footnote Full support	Edge – Full support Edge 79 (Release date: 2020-01-15) footnote Full support	Firefox – No support Firefox footnote No support	Opera – Full support Opera 15 (Release date: 2013-07-02) footnote Full support	Safari – Full support Safari 5.1 (Release date: 2011-07-20) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 14 (Release date: 2013-05-21) footnote Full support	Safari on iOS – Full support Safari on iOS 5 (Release date: 2011-10-12) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 5 (Release date: 2011-10-12) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Non-standard. Check cross-browser support before using.
: Deprecated. Not for use in new websites.

`::-webkit-meter-bar` CSS pseudo-element

Syntax

Examples

HTML

CSS

JavaScript

Result

Specifications

Browser compatibility

See also

::-webkit-meter-bar CSS pseudo-element

Legend

`::-webkit-meter-bar` CSS pseudo-element