设置音频 html 标签的样式

Question

是否可以为音频标签添加CSS样式？我已经尝试过，但我做不到。

谢谢。

<li class="music">
    <div class="podcast">
        <div class="img-episodes-container">
            <img  src="images/podcast1.jpg" alt="microfono">
        </div>

        <h4>Lorem, ipsum dolor.</h4>

        <audio controls>
            <source src="sounds/sound1.mp3">
        </audio>
    </div>
</li>

Answer 1

这个有可能！

audio::-webkit-media-controls-panel {
  background-color: coral;
}

 <li class="music">
   <div class="podcast">
     <div class="img-episodes-container">
       <img src="images/podcast1.jpg" alt="microfono">
     </div>
     <h4>Lorem, ipsum dolor.</h4>
     <audio controls>
       <source src="sounds/sound1.mp3">
     </audio>
   </div>
 </li>

以下是完整列表：

音频::-webkit-媒体控制面板

音频::-webkit-media-controls-静音按钮

音频::-webkit-媒体控件-播放按钮

音频::-webkit-媒体控制-时间线-容器

音频::-webkit-media-controls-当前时间显示

音频::-webkit-media-controls-剩余时间显示

音频::-webkit-媒体控制-时间轴

音频::-webkit-media-controls-volume-slider-container

音频::-webkit-media-controls-volume-slider

音频::-webkit-media-controls-seek-back-button

音频::-webkit-media-controls-seek-forward-button

音频::-webkit-媒体控件-全屏按钮

音频::-webkit-media-controls-rewind-button

音频::-webkit-media-controls-返回实时按钮

音频::-webkit-media-controls-切换隐藏式字幕按钮

根据这个不完整的答案：Is it possible to style html5 audio tag?

请注意这些是 Chrome / Webkit 支持的标签。该元素可能有也可能没有 Firefox / IE11 支持的标签audio，因为几乎没有关于此标签的文档-moz或-ms前缀约定/支持。