css - 样式达到最大值的 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 并自己添加一些类（但您甚至不能监听changeon 事件<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] 选择器将其定位为完成状态：

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

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

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

然后我们可以专门将样式应用于Chrome::-webkit-progress-value和::-moz-progress-barFirefox 上的前台进度条。为此，我将背景颜色设置为#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 演示，它使用两个进度条进行演示——第一个进度条为 50%，第二个进度条为 100%。对于懒惰的人，以下是 Chrome、Firefox 和 IE10 的结果：