如何为Progress Bar设置浅色accent color？Safari颜色偏深问题排查

问题出在Safari对WebKit伪元素中accent-color的特殊处理——它会自动调整颜色的深浅或透明度，导致设置的浅粉色#ffc7d4显示成深红色。直接改用background-color控制伪元素样式即可解决。

修正后的代码 #

CSS

progress {
  accent-color: #ffc7d4; /* 兼容Firefox、Chrome等非Safari浏览器 */
}

/* Firefox 进度条填充色 */
progress::-moz-progress-bar {
  background-color: #ffc7d4;
}

/* Safari/WebKit 进度条填充色 */
progress::-webkit-progress-value {
  background-color: #ffc7d4;
}

/* 可选：设置进度条背景色（默认可能是灰色，按需调整） */
progress::-webkit-progress-bar {
  background-color: #f0f0f0;
}

HTML

<h3>Accent color for a progress element:</h3>
<label for="file">Downloading progress:</label>
<progress id="file" value="72" max="100">72%</progress>

关键说明 #

• Safari的WebKit引擎对::-webkit-progress-value这类伪元素的accent-color支持不完善，会对颜色做自动修正，改用background-color可以精准控制显示颜色。
• 根元素的accent-color保留作为 fallback，确保其他浏览器能正常识别。
• 如果不需要自定义进度条背景，可以删除::-webkit-progress-bar的样式，使用浏览器默认背景。

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