How can I change HTML5 progress bar color inline?

Question

I need to change the color of a progress bar based on some PHP values. I am not familiar with the WebKit technology, but as far as I understand it, it's the only way to change the progress bar color. So, I need to do something like this:

<progress style="progress::-webkit-progress-value { background: red; }" max="<?php echo $max; ?>" value="<?php echo $val; ?>"></progress>

Answer 1

Change the bg color based in the value, something like the following will do the trick:

progress[value^="5"] {
  background-color: blue;
}

It applies the blue color to the bar for all the values that start with the number 5.

Answer 2

This has already been answered before. See How to write a:hover in inline CSS? .

Just like :hover is part of the selector , ::-webkit-progress-value is also part of the selector. Unfortunately the style attribute allows you to specify rules only.