::-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 grey 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
`::-moz-range-progress`	Нет	Нет	22	Нет	Нет	Нет	22	Нет	Нет	Нет	Нет

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-progress