::-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 der Elternteil des ::-webkit-progress-bar-Pseudo-Elements.

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

Syntax

css

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

Beispiele

Diese Beispiele funktionieren nur in Blink- und WebKit-basierten Browsern.

Einen schwarzen Rahmen um die Fortschrittsanzeige hinzufügen

In diesem Beispiel wird ein 2px dicker schwarzer Rahmen 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

Wenn Sie keinen Blink- oder WebKit-Browser verwenden, sieht die Fortschrittsanzeige mit dem obigen Code wie folgt aus:

Die von WebKit/Blink verwendeten Pseudo-Elemente, um andere Teile eines <progress>-Elements zu gestalten:
- ::-webkit-progress-bar
- ::-webkit-progress-value
::-moz-progress-bar