多个<progress>不同颜色的页面上的元素

Question

我正在使用该元素，并且在[造型]（http://html5doctor.com/the-progress-element/）上找到了很好的说明。

我想在页面上有多个进度条，我希望它们具有不同的填充/值颜色。这可能吗？我可以通过调整CSS来做到这一点吗？或者我更喜欢自己滚动？谢谢！

.current-roll { 
 
    -webkit-appearance: none; 
 
    width: 80%; 
 
    height: 25px; 
 
    /* next line does nothing */ 
 
    color: #f7a700 
 
} 
 
.previous-roll { 
 
    -webkit-appearance: none; 
 
    width: 80%; 
 
    height: 25px; 
 
    /* next line does nothing */ 
 
    color: #98c11e 
 
} 
 
progress::-webkit-progress-bar { 
 
    background: #d8d8d8; 
 
} 
 
progress::-webkit-progress-value { 
 
    background: #f7a700; 
 
}

<p>Orange bar</p> 
 
<progress class="current-roll" value="0.5"></progress> 
 

 
<p>Green bar</p> 
 
<progress class="previous-roll" value="0.75"></progress>

Answer 1

progress::-webkit-progress-value是什么改变了进度条的颜色。

例

progress.current-roll::-webkit-progress-value { 
    background: #f7a700; 
} 

Answer 2

你已经拥有你给你的例子来看一下什么！

使用progress.current-roll样式颜色专门为.current-roll例如低于

例如：

.current-roll { 
 
    -webkit-appearance: none; 
 
    width: 80%; 
 
    height: 25px; 
 
    /* next line does nothing */ 
 
    color: #f7a700 
 
} 
 
.previous-roll { 
 
    -webkit-appearance: none; 
 
    width: 80%; 
 
    height: 25px; 
 
    /* next line does nothing */ 
 
    color: #98c11e 
 
} 
 
progress.previous-roll::-webkit-progress-bar { 
 
    background: #d8d8d8; 
 
} 
 
progress.previous-roll::-webkit-progress-value { 
 
    background: #f7a700; 
 
} 
 
progress.current-roll::-webkit-progress-bar { 
 
    background: #ddd; 
 
} 
 
progress.current-roll::-webkit-progress-value { 
 
    background: red; 
 
}

<p>Red bar</p> 
 
<progress class="current-roll" value="0.5"></progress> 
 

 
<p>Orange bar</p> 
 
<progress class="previous-roll" value="0.75"></progress>