样式HTML5进度标记达到了它的最大值

Question

是否可以设置在CSS中以不同方式设置达到其最大值的进度条而不是尚未启动或已启动的进度条？

例如做某事

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

或者我是否必须使用Javascript来检测它？

Answer 1

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

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

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

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

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

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

然后，我们可以专门将样式应用于Chrome 和 Firefox 上的前台进度条::-webkit-progress-value并定位其。::-moz-progress-bar为此，我将背景颜色设置为#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 的结果：