Border style is applied as a background color in progress bar

Question

I was testing a jsfiddle for an animated progress bar when I noticed something strange. I had one CSS rule on the progress tag:

progress {
    border:2px solid #ccc;
}

But the progress went from looking like this from before the CSS:

 <progress value="22" max="100"> </progress> 

To this, after the CSS is applied:

 progress { border: 2px solid #ccc; } 

 <progress value="22" max="100"> </progress> 

Why is such a small change in the CSS making such a radical change in the look of the progress bar. For example, where is the green color coming from?

Answer 1

Yes. progress elements are replaced elements, which don't behave like normal elements.

By default, browsers displays them in a "cool way". However, when you modify them, browsers switch to a "regular way" in order to be able to use your styles.

It happens the same with button elements.

 .border { border: 1px solid; } 

 <progress value="70" max="100"></progress> <button>Button</button> <hr /> <progress value="70" max="100" class="border"></progress> <button class="border">Button</button> 

Answer 2

The bar is being being reset to base styles when adding something. You can read more about the HTML 5 Progress Element

Basically what's happening is the way you see it will render differently on browsers such as -moz and -webkit- based browsers.

To have it appear the same in all you will have to reset the styles of the <progress> element

progress{
-webkit-appearance:none;
-moz-appearance:none;
-s-appearance:none;
-o-appearance:none;
appearance:none;
}

The same issue can be encountered when using the <button> element.

Here is a JS fiddle to help explain. As you can see the top bar will be rendered based on your browser's rendering solution, the bottom escapes the renders and is styled through CSS .