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

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

::-moz-range-progress — это CSS-псевдоэлемент, являющийся расширением Mozilla. Он представляет нижнюю часть дорожки (то есть желоба), по которой перемещается индикатор в элементе <input> типа type="range". Эта часть соответствует значениям, меньшим, чем значение, выбранное в данный момент с помощью ползунка (то есть виртуальной ручки).

Примечание: Если использовать ::-moz-range-progress не с <input type="range">, совпадений не будет и никакого эффекта не произойдёт.

Синтаксис

::-moz-range-progress {
  /* ... */
}

Примеры

HTML

<input type="range" min="0" max="100" step="5" value="50" />

CSS

input[type="range"]::-moz-range-progress {
  background-color: green;
  height: 1em;
}

Результат

Индикатор выполнения с таким стилем может выглядеть примерно так:

The progress bar is a thick green square to the left of the thumb and a thin gray line to the right. The thumb is a circle with a diameter the height of the green area.

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

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

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`-moz-range-progress`	Нет	Нет	22	Нет	Нет	Нет	22	Нет	Нет	Нет	Нет	Нет

См. также

Псевдоэлементы, используемые Gecko для стилизации других частей элемента input типа range:
- ::-moz-range-thumb представляет индикатор, перемещающийся по желобу.
- ::-moz-range-track представляет желоб, по которому перемещается ползунок.
CSS-Tricks: стилизация элементов range с помощью CSS для совместимости между браузерами
QuirksMode: стилизация ползунков и работа с ними с помощью скриптов

© 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/::-moz-range-progress