複数の<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

あなたはすでにあなたが与えた例で探しものを持っています！例えば、具体的.current-rollの色のスタイルを

使用progress.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>