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?

Why can't you check the value of progress bar and add CSS class if it is 100%? — Gurpreet Singh
– Gurpreet Singh, Commented Oct 7, 2013 at 8:42
@GurpreetSingh - AIUI there's no requirement that the max of a progress element is 100. — Chowlett
– Chowlett, Commented Oct 7, 2013 at 8:43

James Donnelly · Accepted Answer · 2013-10-07 10:06:09Z

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:

Chrome, Firefox and IE10 Progress Bar Result

Thanks for the comment, to bad I do not know the max values of the progress bars. I could calculated them of course
Nice, it even works when value is updated dynamically: jsfiddle.net/AFzYU/2 To bad that it works only for pre-defined maximum value.

Pavlo · Accepted Answer · 2013-10-07 11:09:46Z

I would also like to see some pseudo class for finished state of the <progress> element, because the browser (both Chrome and Firefox on OS X) already knows when it's finished and changes the appearance accordingly.

Unfortunately, the only pseudo class <progress> seems to support is :indeterminate, that is value has not been set.

You can of course use JavaScript and add some class on your own (but you can't even listen for change event on <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'); }

Demo: http://jsfiddle.net/AFzYU/

Yes I think this is currently the best option available, tobad it's not yet possible to do it 100% in css

Collectives™ on Stack Overflow

Style HTML5 progress tag that reached it's maximum value

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related