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

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

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

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

Синтаксис

::-webkit-progress-inner-element {
  /* ... */
}

Примеры

Эти примеры работают только в Blink и WebKit.

Добавление чёрной границы вокруг индикатора выполнения

В этом примере вокруг индикатора выполнения добавляется чёрная граница шириной 2px.

HTML

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

CSS

progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}

Результат

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

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

Progressbar is a long green and gray box with a black border. The left 20% of the box is green. 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-inner-element`	23	79	Нет	15	7	25	Нет	14	7	1.5	4.4	7

См. также

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