スタイル最大値に達したHTML5進捗タグ

Question

まだ開始されていない、または開始されている進捗バーとは違って、最大値に達したプログレスバーをCSSでスタイルすることはできますか？

progress[max=value] { 
background: green // color when maxed out 
} 
progress { 
background: red;//default color 
} 

のようなものをやっ例えば

または私はそれを検出するためにJavascriptを使用する必要がありますか？

Answer 1

<progress>要素の完成状態の疑似クラスも表示したいと思います。これは、ブラウザ（OS XのChromeとFirefoxの両方）が既に終了していることを知り、それに応じて外観を変更するためです。

残念ながら、唯一の擬似クラス<progress>は:indeterminate、つまりvalueが設定されていないようです。

あなたはもちろん、JavaScriptを使用して、自分でいくつかのクラスを追加します（ただし、あなたも <progress>上 changeイベントをリッスンすることはできません）することができ

：

var progress = document.querySelector('progress'); 

// then somewhere inside a callback 

if (progress.value === progress.max) { 
    progress.classList.add('finished'); 
} else { 
    progress.classList.remove('finished'); 
} 

はデモ：http://jsfiddle.net/AFzYU/

Answer 2

この答えがあることを前提としていプログレスバーの最大値を知っています。ここで私たちのプログレスバーが、その完成した状態であることを意味、100の最大値と100の値を持つ

<progress max=100 value=100></progress> 

：私は、次のマークアップを使用するつもりです。このことから、私たちはその完成状態でそれをターゲットに[att=val] selectorを使用することができます。

progress[value="100"] { ... } 

クリスCoyierはprogress要素がクロム、FirefoxとIE10でスタイリングすることができます方法を説明article on CSS Tricksを持っています。これに続いて、完成した進行状況バーにスタイリングを適用することができます。

progress[value="100"] { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
} 

その後、我々は、特にChromeとFirefoxの両方にフォアグラウンドプログレスバーをターゲットに::-webkit-progress-valueと::-moz-progress-barにスタイルを適用することができます：まず、スタイルをリセットします。

/* Chrome */ 
progress[value="100"]::-webkit-progress-value { 
    background:#f00; 
} 

/* Firefox */ 
progress[value="100"]::-moz-progress-bar { 
    background:#f00; 
} 

最後に、我々は単にメインセレクターにcolorプロパティを追加することによって、IE10のスタイリングに追加することができます：ここで

progress[value="100"] { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 

    /* IE10 */ 
    color:#f00; 
} 

され、このために私は#f00（赤）の背景色を設定していますJSFiddle demoは、2つのプログレスバーを使用してこれを実証しています。最初は50％、2番目は100％です。怠け者のために、ここでの結果はクロム、FirefoxとIE10またがっです：