::-webkit-progress-value

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-value CSS Pseudo-Element repräsentiert den ausgefüllten Teil der Leiste eines <progress>-Elements. Es ist ein Kindelement des ::-webkit-progress-bar-Pseudo-Elements.

Hinweis: Damit ::-webkit-progress-value Wirkung zeigt, muss das appearance auf none für das <progress>-Element gesetzt werden.

Syntax

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

Beispiele

Dieses Beispiel funktioniert nur in Browsern, die auf Blink oder WebKit basieren.

HTML

html
<progress value="10" max="50"></progress>

CSS

css
progress {
  -webkit-appearance: none;
}

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

Ergebnis

Ergebnis-Screenshot

Eine Fortschrittsanzeige, die den obigen Stil verwendet, würde wie folgt aussehen:

Ein langer orange-grauer Kasten. Die linken 20% sind orange. Die rechten 80% sind grau.

Spezifikationen

Nicht Teil eines Standards.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch