How to style progress bar?

Question

I don't success choose the color and other things...
https://code.sololearn.com/Wd6bflZuHmMt/?ref=app
Thank...

Answer 1

You need to use CSS selectors for customizing progress element:
/*you are able to change height, width, border-radius, margin attribute👇*/
progress {
width:200px;
border-radius:2px;
}

/*the main progress section👇 */
::-webkit-progress-bar{
background-color:#f00;
}

/*progress bar value, which is by default in light-blue👇*/
::-webkit-progress-value{
background-color:#00f;
}

If you are using Mozilla Firefox, use -moz instead of-webkit

EDIT ::
Made a little code about it😁
https://code.sololearn.com/WJ35YlYRD6wk/?ref=app

Answer 2

Thank you very much!