進捗の色を動的に変更するにはどうすればいいですか

Question

あなたの値に応じて進捗の色を変更する必要があります。私は色を変更することができ、上記のコードは以下のコードでは

progress[value^"50"]::-moz-progress-bar{background-color:green} 

を動作することを見ましたが、私の場合は私が「^」演算子をサポートしていませんTECNOLOGY（GWT 2.7）を使用します。

私はコードのように、あまりにも見ました：

#pb::-moz-progress-bar {background-color: green;} 

しかし、私の場合は私がdinamically背景色の値を変更する必要があります。

私は結果を達成するため、事前

Answer 1

でTKS

怒鳴るCSSクラスを使用して

progress:before { 
    content: attr(data-label); 
    color: white; 
    vertical-align: 0; 

    /*Position text over the progress bar */ 
    position:absolute; 
    text-align:center; 
    left:0; 
    right:0; 
} 

progress { 
    -webkit-appearance: none; 
    background-color: gray; 
    position:relative; 
    height: 15px; 
    width: 255px; 
} 
.progressBarRed::-moz-progress-bar { 
    width: 250px; 
    height: 15px; 
    border-style: solid; 
    border: 1px; 
    background-color: red; 
} 

私は擬似セレクターことだった直面したユニークな問題：前進捗要素（Firefoxの）では動作しません。 Chromeの仕事の権利。