::-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

css
::-webkit-progress-bar {
  /* ... */
}

Beispiele

CSS

css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}

HTML

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:

Die Fortschrittsanzeige ist eine horizontale Leiste etwa in der Höhe eines Buchstabens. Die linken 20% sind grün. Die rechten 80% sind orange.

Spezifikationen

Nicht Teil eines Standards.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch