How to change color for <progress>?

Question

https://code.sololearn.com/WgSL1ACNjNHE/?ref=app

Answer 1

progress {
height: 15px;
border: 0px none;
background-color: grey;
color: red;
}

progress::-webkit-progress-bar {
background-color: grey;
}
progress::-webkit-progress-value {
background-color: red;
}

progress::-moz-progress-bar {
background-color: red;
}

taken from:
http://ankitjain.info/ankit/2013/08/15/html5-progress-bar-css-firefox-chrome-animation/

Answer 2

try

progress {
height: 15px;
border: 0px none;
background-color: grey;
color: red;
}

progress::-webkit-progress-bar {
background-color: grey;
}
progress::-webkit-progress-value {
background-color: lime; /* change this */
}

progress::-moz-progress-bar {
background-color: red;
}

Answer 3

https://css-tricks.com/html5-progress-element/

Answer 4

it's don't work.

Answer 5

more precisely, it's work wrong. Color changing, but just on value red and grey background, and doesn't matter what colours you input

Answer 6

value green

Answer 7

progress {
height: 15px;
border: 0px none;
background-color: grey;
color: red;
}

progress::-webkit-progress-bar {
background-color: grey;
}
progress::-webkit-progress-value {
background-color: red;
}

progress::-moz-progress-bar {
background-color: red;
}

taken from:
http://ankitjain.info/ankit/2013/08/15/html5-progress-bar-css-firefox-chrome-animation/

it works, but just if i write under
progress {
background-color: *color*
}
and doesn't matter what the color.

Answer 8

Use inline style="background-color:{{yourColor}}" attribute.It just works. Edit: You're right indeed,it only changes to green.Maybe something problem on sololearn.