::-webkit-progress-bar CSS pseudo-element
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Das ::-webkit-progress-bar-CSS-Pseudoelement repräsentiert den gesamten Balken eines <progress>-Elements. Normalerweise ist nur der ungefüllte Teil des Balkens sichtbar, da es standardmäßig unter dem Pseudoelement ::-webkit-progress-value dargestellt wird. Es ist ein Kindelement des Pseudoelements ::-webkit-progress-inner-element und das Elternelement des Pseudoelements ::-webkit-progress-value.
Hinweis:
Damit ::-webkit-progress-value wirksam wird, muss appearance für das <progress>-Element auf none gesetzt werden.
Syntax
::-webkit-progress-bar {
/* ... */
}
Beispiele
HTML
<progress value="10" max="50"></progress>
CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
Ergebnis
Der obige Code erzeugt in einem WebKit- oder Blink-Browser einen Fortschrittsbalken, der so aussieht:
Spezifikationen
Nicht Bestandteil eines Standards.
Browser-Kompatibilität
Siehe auch
-
Die von WebKit/Blink verwendeten Pseudoelemente zur Gestaltung anderer Teile eines
<progress>-Elements: ::-moz-progress-bar