Benutzerdefinierte Styling-Fortschrittsbalken in CSS

Question

Ich habe einen Fortschrittsbalken und ich möchte es von der Standardeinstellung stylen.

Ich versuchte ein bisschen, aber es hat nicht so funktioniert, wie ich es erwartet hatte.

Ich möchte die Hintergrundfarbe und den Rahmenradius des Fortschrittsbalkens ändern.

Wenn ich die Hintergrundfarbe einstelle, ändert sie sich von der Standardblauen zu grünen Farbe und nicht zu der Farbe, die ich einstelle.

<progress class="amount-progress" value="60500" max="120000">70 %</progress> 

Sie können die fiddle sehen.

Wenn ich den background-color setze, ändert sich die Farbe von Blau zu Grün, die zu einem anderen Blau wechseln muss.

Und ich möchte der Fortschrittsbalken eine glatte Kante haben.

Ich habe border-radius gesetzt, aber das hat auch nicht geklappt.

.amount-progress{ 
    width: 80%; 
margin-left: -11.5%; 
height: 22px; 
background-color: #0091EA; 

}

Answer 1

Sie haben mit dem Kit von HTML5 arbeiten Fortschritte bar.These sind derzeit die gesamte Selektoren für Styling HTML5 Fortschrittsbalken:

progress { 
    /* style rules */ 
} 
progress::-webkit-progress-bar { 
    /* style rules */ 
} 
progress::-webkit-progress-value { 
    /* style rules */ 
} 
progress::-moz-progress-bar { 
    /* style rules */ 
} 

so:

progress { 
 
    border-radius: 2px; 
 
    width: 80%; 
 
    height: 22px; 
 
    margin-left:-11.5%; 
 
} 
 
progress::-webkit-progress-bar { 
 
background-color: #0091EA; 
 
    border-radius: 2px; 
 
} 
 
progress::-webkit-progress-value { 
 
    border-radius: 2px; 
 
} 
 
progress::-moz-progress-bar { 
 
    /* style rules */ 
 
}

<progress value="60500" max="120000">70 %</progress>