::-moz-range-progress
Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.
Das ::-moz-range-progress CSS Pseudo-Element ist eine Mozilla-Erweiterung, die den unteren Teil der Spur (d.h. Rille) darstellt, in der der Indikator in einem <input> vom type="range" gleitet. Dieser Abschnitt entspricht Werten, die niedriger sind als der Wert, der derzeit durch den Daumen (d.h. virtueller Knopf) ausgewählt wurde.
Hinweis:
Die Verwendung von ::-moz-range-progress mit etwas anderem als einem <input type="range"> führt zu keinem Treffer 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 folgendermaßen aussehen:
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
-
Die Pseudo-Elemente, die von Gecko verwendet werden, um andere Teile eines Range-Inputs zu stylen:
::-moz-range-thumbrepräsentiert den Indikator, der in der Rille gleitet.::-moz-range-trackrepräsentiert die Rille, in der der Daumen gleitet.
-
CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS