多個<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>