Псевдоэлемент CSS `::-webkit-meter-bar`

Устарело: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать её, она уже могла быть удалена из соответствующих веб-стандартов, может находиться в процессе удаления или может сохраняться только в целях совместимости. Избегайте её использования и по возможности обновите существующий код; чтобы принять решение, см. таблицу совместимости внизу этой страницы. Учтите, что эта функция может перестать работать в любой момент.

Нестандартное: Эта функция не является стандартной и не входит в дорожную карту стандартизации. Не используйте её на общедоступных сайтах: она будет работать не у всех пользователей. Кроме того, между реализациями могут быть значительные несовместимости, а поведение может измениться в будущем.

::-webkit-meter-bar — это псевдоэлемент CSS, являющийся расширением WebKit и представляющий фон элемента <meter>. Он используется для выбора контейнера шкалы измерительного прибора и применения к нему стилей.

Синтаксис

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

Примеры

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

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

Результат

Спецификации

Не входит ни в один стандарт.

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`-webkit-meter-bar`	12	79	Нет	15	5.1	18	Нет	14	5	1.0	4.4	5

См. также

Псевдоэлементы, используемые WebKit/Blink для стилизации других частей элемента <meter>:
Расширения CSS WebKit

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-meter-bar