::-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 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::-moz-range-progress |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Non-standard. Check cross-browser support before using.
Siehe auch
-
Die von Gecko verwendeten Pseudo-Elemente, um andere Teile eines Bereichseingabeelements zu stylen:
::-moz-range-thumb
repräsentiert den Indikator, der in der Nut gleitet.::-moz-range-track
repräsentiert die Nut, in der der Daumen gleitet.
-
CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS