Style HTML5 progress tag that reached it's maximum value

Question

Is it possible to style a progressbar that reached its max-value differently in CSS than the one that hasn't started yet or is started?

for example doing something like

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

Or do I have to use Javascript to detect it?

Answer 1

This answer assumes that we know the maximum value of the progress bar. I'm going to use the following markup:

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

Our progress bar here has a maximum value of 100 and a value of 100, meaning it is at its completed state. From this we can use the [att=val] selector to target it at its completed state:

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

Chris Coyier has an article on CSS Tricks which explains how the progress element can be styled in Chrome, Firefox and IE10. Following this we can apply the styling to the completed progress bar. First we reset the style:

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

Then we can specifically apply styling to ::-webkit-progress-value and ::-moz-progress-bar to target the foreground progress bar on both Chrome and Firefox. For this I'm setting a background colour of #f00 (red):

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

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

Finally we can add in the IE10 styling by simply adding a color property on the main selector:

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

    /* IE10 */
    color:#f00;
}

Here is a JSFiddle demo demonstrating this with two progress bars - the first at 50% and the second at 100%. For the lazy, here is the result across Chrome, Firefox and IE10: