::-webkit-progress-inner-element

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-inner-element CSS Pseudo-Element repräsentiert den äußersten Container des <progress>-Elements. Es ist das Elternelement des ::-webkit-progress-bar Pseudo-Elements.

Hinweis: Damit ::-webkit-progress-value Wirkung zeigt, muss appearance auf none beim <progress>-Element gesetzt sein.

Syntax

css
::-webkit-progress-inner-element {
  /* ... */
}

Beispiele

Diese Beispiele funktionieren nur in Blink und WebKit.

Einen schwarzen Rand um die Fortschrittsanzeige hinzufügen

In diesem Beispiel wird ein 2px schwarzer Rand um die Fortschrittsanzeige hinzugefügt.

HTML

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

CSS

css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}

Ergebnis

Ergebnis-Screenshot

Falls Sie keinen Blink- oder WebKit-Browser verwenden, sieht der obige Code wie folgt aus:

Fortschrittsbalken ist ein langes grünes und graues Feld mit einem schwarzen Rand. Die linken 20% des Feldes sind grün. Die rechten 80% sind grau.

Spezifikationen

Nicht Teil eines Standards.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch