Style HTML5-Fortschrittstag, der seinen Maximalwert erreicht hat

Diese Antwort setzt voraus, dass wir den Maximalwert der Fortschrittsanzeige kennen. Ich werde das folgende Markup verwenden:

Unser Fortschrittsbalken hat hier einen maximalen Wert von 100 und einen Wert von 100, was bedeutet, dass er sich in seinem vollendeten Zustand befindet. Von diesem können wir den [att = val] Selektor verwenden, um ihn auf seinen vollständigen Status zu setzen:

Chris Coyier hat einen Artikel zu CSS Tricks , der erklärt, wie das Element progress gestaltet werden kann Chrome, Firefox und IE10. Danach können wir das Styling auf den fertigen Fortschrittsbalken anwenden. Zuerst setzen wir den Stil zurück:

Dann können wir das Styling speziell auf ::-webkit-progress-value und ::-moz-progress-bar anwenden, um die Vordergrund-Fortschrittsleiste sowohl in Chrome als auch in Firefox anzusteuern. Dafür setze ich eine Hintergrundfarbe von #f00 (rot):

Schließlich können wir das IE10-Styling hinzufügen, indem wir einfach eine color -Eigenschaft auf dem Hauptselektor hinzufügen:

Hier ist eine JSFiddle-Demo , die das mit zwei Fortschrittsbalken demonstriert - dem ersten bei 50% und der zweite bei 100%. Für die Lazy, hier ist das Ergebnis in Chrome, Firefox und IE10:

Ich würde auch gerne eine Pseudo-Klasse für den fertigen Zustand des Elements <progress> sehen, da der Browser (sowohl Chrome als auch Firefox unter OS X) bereits weiß, wann er fertig ist und das Aussehen entsprechend ändert.

Leider scheint die einzige Pseudoklasse <progress> zu unterstützen :indeterminate , dh value wurde nicht gesetzt.

Sie können natürlich JavaScript verwenden und selbst einige Klassen hinzufügen (aber Sie können nicht einmal auf change event auf <progress> hören):

Demo: Ссылка