如何更改 Chrome 的 HTML5 进度条控件的颜色答案

【问题标题】：How can I change color for HTML5 progress bar control for Chrome如何更改 Chrome 的 HTML5 进度条控件的颜色
【发布时间】：2019-07-29 15:25:12
【问题描述】：

我有一个 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%;
}

【问题讨论】：

在我看来是蓝色的......也许你可以澄清一下具体应该是蓝色但不是？
您的代码似乎可以正常工作。

标签： html css google-chrome progress-bar

【解决方案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%;
}

【讨论】：

【解决方案2】：

代码确实有效，但是，我假设 Chrome 缓存了您的 CSS，这就是您在 Internet Explorer 中看不到更改的原因。它经常发生，因此为了解决这个烦人的问题，您只需使用快捷键 F5 (Windows) 或 CMD + R (Mac) 在 Chrome 中重新加载页面。如果这没有帮助，请尝试使用快捷键 CTRL + F5 (Windows) 或 CMD + SHIFT + R (Mac) 重新加载。此外，另一种选择是通过隐身模式。在这种情况下，更改应该是可见的。

【讨论】：

完全没问题@Mikhail！很高兴我帮助了你！如果您不介意，请接受此答案；）