html - 如何更改 Chrome 的 HTML5 进度条控件的颜色

Question

我有一个 HTML5 进度条。我正在尝试将其颜色更改为蓝色。颜色在 IE 中改变，但在 Chrome 中不变。

我确实在其他论坛上看过，从那里应对风格，但到目前为止，进度颜色没有改变。应如何更新我的 CSS 以更改 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

正如@Kornelijus Glinskas 所指出的，我确实使用了缓存的 CSS，在我按下 CNTRL-F5 后，颜色出现了。但是，由于进度条及其背景的颜色相同，因此颜色不够用。在这里我[发布最终的 CSS

/* 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: #eee;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

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

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