如何更改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中的进度栏值的颜色？