html音频播放器进度条样式

Question

一个简单的问题， 有没有办法使用

HTML5

和 WebKit Properties 更改 CSS

音频进度条的背景颜色

Answer 1

是的，您可以通过覆盖默认类来使用。

<style>
  /* Change background color of audio progress bar */
  audio::-webkit-media-controls-timeline {
    background-color: #FF0000; /* Change to your desired color */
  }
</style>

您还可以覆盖其他属性，如下所示。

• ::-webkit-media-controls-play-button：设置播放按钮的样式。
• ::-webkit-media-controls-pause-button：设置暂停按钮的样式。
• ::-webkit-media-controls-timeline：设置进度条及其背景的样式。
• ::-webkit-media-controls-current-time-display：设置当前播放时间的显示样式。
• ::-webkit-media-controls-time-remaining-display：剩余播放时间的显示样式。
• ::-webkit-media-controls-volume-slider-container：设置音量滑块容器的样式。
• ::-webkit-media-controls-volume-slider：设置音量滑块轨道的样式。
• ::-webkit-media-controls-mute-button：设置静音/取消静音按钮的样式。
• ::-webkit-media-controls-fullscreen-button：设置全屏按钮的样式。
• ::-webkit-media-controls-enclosure：设置整个控制面板外壳的样式。

这些是特定于 WebKit 的伪元素，它们的可用性和行为可能因不同的浏览器和版本而异。所有属性都可能受支持或对控件有可见的影响。