CSS中的自定義樣式化進度條

我有一個進度條，我想讓它遠離默認樣式。CSS中的自定義樣式化進度條

我嘗試了一些東西，但沒有按預期工作。

我想改變進度條的背景顏色和邊框半徑。

當我設置背景顏色時，它從默認的藍色變爲綠色，而不是我設置的顏色。

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

您可以看到fiddle。

當我設置background-color時，顏色從藍色變爲綠色，必須變爲不同的藍色。

而且我希望進度條具有平滑的邊緣。

我確實設置了border-radius但這也沒有解決。

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

}

來源

2017-02-17 Naveen Kumar

[如何更改HTML5進度條的顏色]的可能重複（http://stackoverflow.com/questions/21476748/how-to-change-the-color-of-html5-progress-bar） – caramba

您有HTML5的工具包，工作進度bar.These目前對HTML5的造型進度條的整個選擇：

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

這樣：

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>

來源

2017-02-17 08:02:31 Teshtek

CSS中的自定義樣式化進度條

回答

相關問題