已達到最大值的樣式HTML5進度代碼

是否可以在CSS中以不同於尚未啓動或啓動的方式對其進行不同最大值的進度條進行樣式設置？已達到最大值的樣式HTML5進度代碼

例如做這樣的事情

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

還是我必須使用JavaScript來檢測呢？

來源

2013-10-07 Robbert Stevens

你爲什麼不能檢查進度條的值，並添加CSS類，如果是100％？ –

@GurpreetSingh - AIUI沒有要求'progress'元素的最大值爲100. – Chowlett

我還想看看<progress>元素已完成狀態的僞類，因爲瀏覽器（OS X上的Chrome和Firefox）都已知道它何時完成並相應地更改外觀。

不幸的是，唯一的僞類<progress>似乎支持的是:indeterminate，即value尚未設置。

當然你也可以使用JavaScript，並添加一些自己的類（但你甚至不能監聽change事件上<progress>）：

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/

來源

2013-10-07 09:34:08 Pavlo

是的我認爲這是目前最好的選擇，但它還不可能在css中100％完成 –

@RobbertStevens Somebody應該爲此打開一個請求。 – Pavlo

這個回答假設我們知道進度條的最大值。我將使用下面的標記：

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

我們的進步在這裏吧是100，最大值和值100，這意味着它是在其完成的狀態。由此，我們可以使用[att=val] selector在其完成的狀態加以指定：

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

克里斯Coyier有article on CSS Tricks這也解釋瞭如何progress元素可以在Chrome，Firefox和IE10的樣式。在此之後，我們可以將樣式應用於完成的進度條。首先，我們重置風格：

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

然後，我們可以專門將樣式應用到::-webkit-progress-value和::-moz-progress-bar的目標來器和Firefox的前景進度條。對於這個我設置的#f00（紅色）背景顏色：

/* 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; 
}

這裏是一個JSFiddle demo演示這與兩個進度條 - 第一個在50％，第二個在100％。對於懶惰的，這裏是跨瀏覽器，Firefox和IE10結果：

Chrome, Firefox and IE10 Progress Bar Result

來源

2013-10-07 09:58:00

感謝您的評論，我不知道進度條的最大值。我可以計算它們當然 –

不錯，它甚至可以在'value'動態更新的時候工作：http://jsfiddle.net/AFzYU/2/只有預定義的最大值才能工作。 – Pavlo

已達到最大值的樣式HTML5進度代碼

回答

相關問題