::-webkit-progress-value

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

Hinweis: Damit ::-webkit-progress-value wirksam ist, muss 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 mit dem obigen Stil würde so aussehen:

Eine lange orangefarbene und graue Box. Die linken 20% sind orange. Die rechten 80% sind grau.

Spezifikationen

Kein Teil eines Standards.

Browser-Kompatibilität

Siehe auch