如何通过CSS及WebKit属性修改HTML5音频进度条背景色？

当然可以，基于WebKit/Blink内核的浏览器（如Chrome、Safari）支持通过专属伪元素来定制HTML5 <audio> 控件的样式，包括进度条的背景色。

示例代码 #

HTML结构

<audio controls>
  <source src="your-audio.mp3" type="audio/mpeg">
  你的浏览器不支持音频播放功能
</audio>

CSS样式（WebKit专属）

/* 定制音频控件的整体面板背景 */
audio::-webkit-media-controls-panel {
  background-color: #f5f5f5;
}

/* 设置进度条未播放区域的背景色 */
audio::-webkit-media-controls-progress-bar {
  background-color: #e0e0e0;
}

/* 可选：定制进度条已播放区域的颜色 */
audio::-webkit-media-controls-current-time-display {
  color: #333;
}

注意事项 #

这些WebKit专属伪元素仅在Chrome、Safari等WebKit/Blink内核浏览器中生效。如果需要兼容Firefox或旧版Edge，需要使用对应浏览器的前缀伪元素（比如Firefox的 ::-moz-range-track）。

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