样式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并自行添加一些课程（但您甚至无法在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/

Answer 2

此答案假设我们知道进度条的最大值。我将使用以下标记：

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

此处的进度条最大值为100，值为100，表示处于已完成状态。由此我们可以使用[att=val] selector将其定位到已完成状态：

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

Chris Coyier有一个article on CSS Tricks，解释了如何在Chrome，Firefox和IE10中设置progress元素的样式。在此之后，我们可以将样式应用于完成的进度条。首先我们重置样式：

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

然后，我们可以专门将样式应用于::-webkit-progress-value和::-moz-progress-bar，以定位Chrome和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％。对于懒惰，这是Chrome，Firefox和IE10的结果：