::-moz-range-thumb
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Der ::-moz-range-thumb-CSS-Pseudoelement ist eine Mozilla-Erweiterung, die den Thumb (d.h. virtuellen Knopf) eines <input> vom type="range" darstellt. Der Benutzer kann den Thumb entlang der Spur des Eingabefelds bewegen, um dessen numerischen Wert zu ändern.
Hinweis:
Die Verwendung von ::-moz-range-thumb mit etwas anderem als einem <input type="range"> hat keine übereinstimmende Wirkung und keinen Effekt.
Syntax
::-moz-range-thumb {
/* ... */
}
Beispiele
HTML
<input type="range" min="0" max="100" step="5" value="50" />
CSS
input[type="range"]::-moz-range-thumb {
background-color: green;
}
Ergebnis
Ein Fortschrittsbalken mit diesem Stil könnte etwa so aussehen:
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
Loading…
Siehe auch
-
Die von Gecko verwendeten Pseudoelemente, um andere Teile eines Range-Eingabefelds zu stylen:
::-moz-range-trackrepräsentiert die Rille, in der der Thumb gleitet.::-moz-range-progressrepräsentiert den unteren Teil der Spur.
-
Ähnliche Pseudoelemente, die von anderen Browsern verwendet werden:
::-webkit-slider-thumb, ein Pseudoelement, das von WebKit und Blink unterstützt wird (Safari, Chrome und Opera)
-
CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS