1

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>
honk
  • 9,137
  • 11
  • 75
  • 83
sashalev
  • 11
  • 2

2 Answers2

1

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.

Community
  • 1
  • 1
Fred Truter
  • 667
  • 4
  • 10
-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.

Jonathan Zúñiga
  • 645
  • 3
  • 13
  • 25
  • Thank you for the answer, but I am still having problem implementing it. Could you please specify what exactly I need to put into my html code and into my css. Do I need to include any outside css files? I am sorry I am so raw in this... – sashalev Dec 30 '15 at 16:04
  • @sashalev you can ckeck this sample code, will help you a lot: http://jsfiddle.net/jonathanzuniga/Lukof63x/ – Jonathan Zúñiga Dec 30 '15 at 17:36
  • Thank you Jonathan, this is exactly what i needed! – sashalev Dec 30 '15 at 21:26