Progress Bar Chrome Style

I'm not sure why I can't style a progress bar fill color in chrome. I'm setting the color, but nothing is happening. Can someone help? The problem is with #health-bar not turning red. Also trying to turn the bar red in all browsers. Not sure when to use color, or background.

Thanks for the help

/* Progress Resets*/

progress,          /* All HTML5 progress enabled browsers */
progress[role]     /* polyfill */
{

    /* gets rid of default border in Firefox and Opera. */
    border: none;

    /* Needs to be in here for Safari polyfill so background images work as expected. */
    background-size: auto;
  
  
}

/* Polyfill */
progress[role]:after {
    background-image: none; /* removes default background from polyfill */
}

/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
    display: none;
}


/* Health Bar */

#health-bar {

    color:red;

}
#health-bar::-webkit-progress-bar {
 
   color: #ffeeee;

}
#health-bar::-webkit-progress-value {
  
    background: red;

}

#health-bar::-moz-progress-bar {
    background:red;
}

/* Polyfill */
#health-bar[aria-valuenow]:before  {
  
    background: black;

}

Code (CSS):

 

Haven't tried progress myself, but you could have a look at this article here: https://css-tricks.com/html5-progress-element/ Seems to cover most issues, even a fallback for non-compliant browsers.

 

Thanks for the article. I cut and pasted code, and still no good. I found a solution that works well. HTML5 meter. It's a lot easier to style across browsers, and has a neat feature.

Min
Max
Low
High
Optimum

Each value can have its own color. Neat for games.

Health bar red at optimum, yellow at high, and black at low

 

Generally issues like this aren't just why I don't use <progress> I question why it even exists since it's only really useful with scripting... and if it's a scripting only element why the *** does it have a tag?

Much less the goofball hodge-podge of proprietary values you have to throw at it... There's a reason for something like that I'd just put a div inside a div, set a fixed width on the outer one, and a % width and height on the inner one. Problem solved.

... and I'd generate that from the scripting on the DOM instead of crapping all over the markup with scripting only code.