如何修改进度条背景色且不恢复为默认样式？

问题详情 #

我使用的代码如下：

CSS代码 #

progress {
  color-scheme: light dark;
  accent-color: RGBA(30, 170, 255, 1);
}

HTML代码 #

<p> Progress in life goals (5%)
  <progress id="progressbar1" value="5" max="100"></progress>
</p>

遇到的问题：

• color-scheme设置无效果
• accent-color仅作用于进度条的已加载部分
• 想把进度条背景改成浅灰色，但一设置background-color，进度条就变成绿色进度、灰色背景的矩形样式，换其他颜色也出现同样问题
• 代码已通过W3.org验证，测试浏览器为Microsoft Edge，需要兼容多数现代浏览器，无需支持IE

已尝试的操作：

• 设置不同背景色
• 添加透明度
• 修改color-scheme
• 定义进度条形状
• 使用内部样式标签

可行解决方案 #

原生progress元素的默认样式在不同浏览器中差异较大，直接设置background-color会触发浏览器的样式重置，需要通过伪元素分别定制背景和进度部分：

progress {
  /* 重置浏览器默认样式，避免变形 */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 6px; /* 保留圆角 */
  overflow: hidden;
}

/* WebKit内核浏览器（Chrome、Edge）的进度条背景 */
progress::-webkit-progress-bar {
  background-color: #e0e0e0; /* 浅灰色背景 */
  border-radius: 6px;
}

/* WebKit内核的已加载进度部分 */
progress::-webkit-progress-value {
  background-color: rgba(30, 170, 255, 1); /* 自定义进度颜色 */
  border-radius: 6px 0 0 6px; /* 左侧圆角匹配整体 */
}

/* Firefox的已加载进度部分 */
progress::-moz-progress-bar {
  background-color: rgba(30, 170, 255, 1);
  border-radius: 6px 0 0 6px;
}

/* Firefox的进度条背景 */
progress {
  background-color: #e0e0e0;
}

说明 #

1. appearance: none用来清除浏览器自带的默认样式，解决设置背景后样式变形的问题
2. 针对WebKit和Firefox分别设置伪元素，保证多浏览器兼容性
3. 统一设置border-radius，维持原本的圆角效果
4. 进度部分仅设置左侧圆角，和整体样式更协调

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