如何设置进度元素的颜色? [英] How can I set the color for the progress element?
问题描述
是否可以设置条"的颜色?HTML中的< progress>
元素(当您指定一个值时,条形填充到该值的点)?如果是这样,怎么办? background-color
和 background
似乎没有任何作用.该技术是否与所有浏览器的最新版本交叉兼容?
Is it possible to set the color of the "bar" for the <progress>
element in HTML (when you specify a value, the bar is filled up to the point of the value)? If so, how? background-color
and background
don't seem to have any effect. Is the technique cross compatible with the latest version of all browsers?
推荐答案
您可以通过更改 background
在< progress>
元素中设置条形的样式.一些浏览器专有的选择器.
You can style the color of the bar in the <progress>
element by changing the background
of a few browser-proprietary selectors.
在Firefox中,您可以使用以下内容:
In Firefox, you can use the following:
progress::-moz-progress-bar { background: blue; }
在Chrome或Safari中,您可以使用:
In Chrome or Safari, you can use:
progress::-webkit-progress-value { background: blue; }
在IE10中,您只需要使用 color
属性:
In IE10, you just need to use the color
attribute:
progress { color: blue; }
来源: http://html5doctor.com/the-progress-element/
总而言之,这使得:
progress::-moz-progress-bar { background: blue; }
progress::-webkit-progress-value { background: blue; }
progress { color: blue; }
<progress value="0" max="100"></progress><br>
<progress value="25" max="100"></progress><br>
<progress value="50" max="100"></progress><br>
<progress value="75" max="100"></progress><br>
<progress value="100" max="100"></progress><br>
这篇关于如何设置进度元素的颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!