::-webkit-progress-bar
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 ::-webkit-progress-bar CSS Pseudo-Element repräsentiert die gesamte Leiste eines <progress> Elements. Normalerweise ist es nur als der ungefüllte Teil der Leiste sichtbar, da es standardmäßig unterhalb des ::-webkit-progress-value Pseudo-Elements gerendert wird. Es ist ein Kind des ::-webkit-progress-inner-element Pseudo-Elements und das Elternteil des ::-webkit-progress-value Pseudo-Elements.
Hinweis:
Damit ::-webkit-progress-value wirksam wird, muss appearance auf none beim <progress> Element gesetzt werden.
Syntax
::-webkit-progress-bar {
/* ... */
}
Beispiele
CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
HTML
<progress value="10" max="50"></progress>
Ergebnis
Ergebnis-Screenshot
Der obige Code führt zu einer Fortschrittsanzeige, die in einem WebKit- oder Blink-Browser folgendermaßen aussieht:
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
-
Die Pseudo-Elemente, die von WebKit/Blink verwendet werden, um andere Teile eines
<progress>Elements zu stylen: ::-moz-progress-bar