::-moz-range-progress
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.
Das ::-moz-range-progress CSS Pseudo-Element ist eine Mozilla-Erweiterung, die den unteren Bereich der Spur (d.h. der Nut) darstellt, in der der Indikator in einem <input> vom Typ type="range" verschoben wird. Dieser Bereich entspricht den Werten, die niedriger sind als der aktuell vom Daumen (d.h. dem virtuellen Knopf) ausgewählte Wert.
Hinweis:
Die Verwendung von ::-moz-range-progress mit allem außer einem <input type="range"> führt zu keiner Übereinstimmung und hat keine Wirkung.
Syntax
::-moz-range-progress {
/* ... */
}
Beispiele
HTML
<input type="range" min="0" max="100" step="5" value="50" />
CSS
input[type="range"]::-moz-range-progress {
background-color: green;
height: 1em;
}
Ergebnis
Eine Fortschrittsanzeige mit diesem Stil könnte wie folgt aussehen:
Spezifikationen
Gehört zu keinem Standard.
Browser-Kompatibilität
Siehe auch
-
Die von Gecko verwendeten Pseudo-Elemente, um andere Teile eines Bereichseingabeelements zu stylen:
::-moz-range-thumbrepräsentiert den Indikator, der in der Nut gleitet.::-moz-range-trackrepräsentiert die Nut, in der der Daumen gleitet.
-
CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS