How can I change color for HTML5 progress bar control for Chrome

Question

I have an HTML5 progress bar. I am trying to change its color to blue. The color changes in IE but not in Chrome.

I did look in other forums, coped styles from there but so far the progress color doesn't change. How should update my CSS to change progress bar color for Chrome?

/* IE10 */
progress {
    color: blue;
    border: solid 1pt gray;
    width: 300pt;
    height: 20px;
}

/* Firefox */
progress::-moz-progress-bar {
    background: blue;
    border: solid 1pt gray;
    width: 300pt;
    height: 20px;
}

/* Chrome */
progress::-webkit-progress-value {
    background: blue;
    border: solid 1pt gray;
    width: 300pt;
    height: 20px;
}

/* Polyfill */
progress[aria-valuenow]:before {
    background: blue;
    border: solid 1pt gray;
    width: 300pt;
    height: 20px;
}

progress {
    -webkit-appearance: none;
    appearance: none;
}

progress::-webkit-progress-bar {
    background-color: blue;
}

progress[value] {
    -webkit-appearance: none;
    appearance: none;
}

progress[value]::-webkit-progress-value {
    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

Answer 1

The code definitely works, however, I'm assuming that Chrome cached your CSS that's why you don't see changes while you do in Internet Explorer. It happens pretty often, so in order to tackle this annoying issue, you can simply reload the page in the Chrome with a shortcut F5 (Windows) or CMD + R (Mac). If that doesn't help, try hard reload with a shortcut CTRL + F5 (Windows) or CMD + SHIFT + R (Mac). Also, the alternative would be going via incognito mode. In that case, the changes should be visible.