::-webkit-progress-inner-element

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

Die Pseudo-Elemente, die von WebKit/Blink verwendet werden, um andere Teile eines <progress>-Elements zu stylen:
- ::-webkit-progress-bar
- ::-webkit-progress-value
::-moz-progress-bar