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

Deprecated

Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.

Learn more
See full compatibility

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.

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