Why are my progress bars displaying incorrectly in IE?

css, html, internet-explorer, progress-bar

Solution

Use the `::-ms-fill` pseudo element:

progress::-ms-fill {
    border: none;
}

progress[value="100"]::-ms-fill {
    background-color: #00ff00;
}

http://jsfiddle.net/PzrLu/13/

Problem

I'm getting strange behavior from my HTML5 progress bars in IE (10) and wonder if there's anything I can do to my CSS to fix it. I have some simple HTML `progress` elements ``` <progress max="100" value="10"></progress><br/> <progress max="100" value="30"></progress><br/> <progress max="100" value="50"></progress><br/> <progress max="100" value="70"></progress><br/> <progress max="100" value="90"></progress><br/> <progress max="100" value="100"></progress> ``` That I've styled using CSS that I've adapted from various sources which ought to work on "all browsers". On all browsers other than IE, I get what I expect: But on IE, a black line is added at the end of each bar, and the 100% bar does not display the correct color: Is there something I can change in my CSS to get the IE progress bars to display correctly in IE?

Original source