::-moz-range-thumb

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

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

Примечание: Использование ::-moz-range-thumb с любым элементом, кроме <input type="range">, ничего не подменяет и не оказывает никакого влияния.

Синтаксис

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

Примеры

HTML

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

CSS

input[type="range"]::-moz-range-thumb {
  background-color: green;
}

Результат

Ползунок прогресса, использующий этот стиль, может выглядеть примерно так:

The thumb of the 'input type=right' styled in green

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

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

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`::-moz-range-thumb`	Нет	Нет	21	Нет	Нет	Нет	21	Нет	Нет	Нет	Нет

См. также

Псевдоэлементы, используемые Gecko для форматирования других частей входного элемента типа range:
- ::-moz-range-track представляет канавку, в которой перемещается ползунок.
- ::-moz-range-progress представляет нижнюю часть дорожки.
Аналогичные псевдоэлементы, используемые другими браузерами:
- ::-webkit-slider-thumb, псевдоэлемент, поддерживаемый WebKit и Blink (Safari, Chrome и Opera)
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-thumb