HTML进度条CSS样式问题：进度值颜色无法修改

你的问题核心是进度条的填充颜色（进度值）样式未正确覆盖浏览器默认样式，大概率是CSS变量作用域或伪元素样式优先级的问题，以下是具体修复方案：

修复步骤 #

1. 调整CSS变量作用域 #

将进度条颜色变量定义在全局:root中，确保伪元素能正确读取到变量值（部分浏览器中，伪元素无法直接读取宿主元素的自定义变量）：

:root {
  --progress-color: red; /* 进度填充颜色 */
  --progress-bg: #8499E0; /* 进度条背景颜色 */
}

progress {
  height: 2rem;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  /* Firefox下需单独设置未填充区域背景 */
  background-color: var(--progress-bg);
}

progress[value]::-webkit-progress-bar {
  background-color: var(--progress-bg);
  height: 2rem;
}

progress[value]::-webkit-progress-value {
  background-color: var(--progress-color);
}

progress[value]::-moz-progress-bar {
  background-color: var(--progress-color);
}

2. 排查样式覆盖问题 #

如果修改后仍不生效，打开浏览器开发者工具（F12）：

• 定位到progress元素，查看::-webkit-progress-value（Chrome/Edge）或::-moz-progress-bar（Firefox）的样式面板
• 确认自定义的background-color是否被划掉（被更高优先级样式覆盖），如果是，可在对应样式后添加!important强制覆盖（仅在必要时使用）

3. 检查进度条状态 #

确保你的HTML进度条已设置value和max属性，例如：

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

若未设置value，进度条会处于不确定状态，此时部分浏览器的填充样式规则会不同。

内容的提问来源于stack exchange，提问作者KaiLPD