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

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

::-webkit-progress-bar — это CSS-псевдоэлемент, представляющий всю полосу элемента <progress>. Обычно видна только незаполненная часть полосы, поскольку по умолчанию она отображается под псевдоэлементом ::-webkit-progress-value. Это дочерний элемент псевдоэлемента ::-webkit-progress-inner-element и родительский элемент псевдоэлемента ::-webkit-progress-value.

Примечание: Чтобы ::-webkit-progress-value вступило в силу, свойству appearance необходимо задать значение none для элемента <progress>.

Синтаксис

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

Примеры

CSS

progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}

HTML

<progress value="10" max="50"></progress>

Результат

Скриншот результата

Приведённый выше код создаёт индикатор выполнения, который в браузерах WebKit или Blink выглядит так:

The progress bar is a horizontal bar about the height of a letter. The left 20% is green. The right 80% is orange.

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

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

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`-webkit-progress-bar`	25	79	Нет	15	7	25	Нет	14	7	1.5	4.4	7

См. также

Псевдоэлементы, используемые WebKit/Blink для стилизации других частей элемента <progress>:
- ::-webkit-progress-value
- ::-webkit-progress-inner-element
::-moz-progress-bar

© 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-progress-bar