::-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 nicht ausgefüllte Teil der Leiste sichtbar, da es standardmäßig unterhalb des ::-webkit-progress-value
Pseudo-Elements gerendert wird. Es ist ein Kindelement des ::-webkit-progress-inner-element
Pseudo-Elements und das Elternelement des ::-webkit-progress-value
Pseudo-Elements.
Hinweis:
Damit ::-webkit-progress-value
wirksam wird, muss das appearance
auf none
für das <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 erzeugt eine Fortschrittsleiste, die in einem WebKit- oder Blink-Browser wie folgt aussieht:
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::-webkit-progress-bar |
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 WebKit/Blink verwendeten Pseudo-Elemente, um andere Teile eines
<progress>
-Elements zu gestalten: ::-moz-progress-bar