如何更改HTML中的進度欄值的顏色？

progress { 
 
    border: none; 
 
    width: 400px; 
 
    height: 60px; 
 
    background: crimson; 
 
} 
 

 
progress { 
 
    color: lightblue; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background: lightblue; 
 
} 
 

 
progress::-moz-progress-bar { 
 
    background: lightcolor; 
 
}

<div> 
 
    <progress min="0" max="100" value="63" /> 
 
</div>

我已經試過幾乎一切，但進度條的顏色值保持不變。唯一能夠響應變化的瀏覽器是IE。 Firefox只允許改變背景顏色。 Chrome根本不顯示任何內容。你能發現我的代碼有什麼問題嗎？

來源

2017-08-04 CeeJay

https://css-tricks.com/html5-progress-element/ – lumio

默認情況下，這是由操作系統/瀏覽器的風格，但你可以即覆蓋它。 '-webkit-appearance'（見https://css-tricks.com/html5-progress-element/#article-header-id-4） – Shameen

'-moz-progress-bar'中的錯字？ lighcolor = lightblue？但在Firefox中適用於我。 https://jsfiddle.net/t0znpjht/ – Auskennfuchs

progress { 
 
    border: none; 
 
    width: 400px; 
 
    height: 60px; 
 
    background: crimson; 
 
} 
 

 
progress { 
 
    color: lightblue; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background: lightblue; 
 
} 
 

 
progress::-moz-progress-bar { 
 
    background: lightcolor; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background: red; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background: blue; 
 
}

It will work on webkit browser, like this example 
 

 
<div> 
 
    <progress min="0" max="100" value="63" /> 
 
</div>

來源

2017-08-04 13:29:06

如何更改HTML中的進度欄​​值的顏色？

回答

相關問題

如何更改HTML中的進度欄值的顏色？