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

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

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

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

Синтаксис

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

Примеры

Этот пример работает только в браузерах на основе Blink или WebKit.

HTML

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

CSS

progress {
  -webkit-appearance: none;
}

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

Результат

Снимок экрана с результатом

Полоса выполнения с приведённым выше стилем будет выглядеть так:

A long orange and gray box. The left 20% is orange. The right 80% is gray.

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

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

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

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

См. также

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