::-webkit-progress-bar
Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es 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