我正在构建一个实现 HTML5 音频标签的音乐播放器 Web 应用程序，但希望它在浏览器中看起来一致 - 是否可以定义我自己的自定义 CSS？怎么做？
【问题讨论】：
outline 帮助它突出一点。
标签： css audio html html5-audio
您可以使用一些不起眼的 CSS 选择器来设置音频元素的样式。这是其中的一些。
audio::-webkit-media-controls-enclosure {
background-color: #c6c6ec;
}
audio::-webkit-media-controls-timeline {}
audio::-webkit-media-controls-volume-control-container {}
audio::-webkit-media-controls-volume-control-container.closed {}
audio::-webkit-media-controls-volume-slider-container {}
audio::-webkit-media-controls-volume-slider {}
audio::-webkit-media-controls-seek-back-button {}
audio::-webkit-media-controls-seek-forward-button {}
audio::-webkit-media-controls-fullscreen-button {}
audio::-webkit-media-controls-rewind-button {}
audio::-webkit-media-controls-return-to-realtime-button {}
audio::-webkit-media-controls-toggle-closed-captions-button {}
尚未找到这些的详尽列表，但here's 最接近。
【讨论】：
除了其他答案中提到的 box-shadow、transform 和 border 选项外，WebKit 浏览器目前还遵循 -webkit-text-fill-color 来设置“经过时间”数字的颜色，但由于没有办法设置它们的背景（可能会因平台而异，例如某些操作系统上的反转高对比度模式），如果您在其他地方使用过，建议您将 -webkit-text-fill-color 设置为值“initial”并且音频元素继承了这个，否则一些用户可能会发现这些数字不可读。
【讨论】：
我很偶然地发现（当时我正在处理图像），box-shadow、border-radius 和 transitions 与 bog-standard 音频标签播放器配合得很好。我在 Chrome、FF 和 Opera 中有这个工作。
audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
与：-
audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow: 2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}
我承认它只是“让它变得更有趣”，但它让它们比现有的更令人兴奋，而且无需在 JS 中大肆吹捧。
不幸的是，在 IE 中不可用（还不支持转换位），但它似乎降级得很好。
【讨论】：
【讨论】：
目前没有任何方法可以使用 CSS 设置 HTML5 <audio> 播放器的样式。相反，您可以放弃control 属性，并使用Javascript 实现您自己的控件。如果您不想自己实现所有这些，我建议您使用现有的可主题化 HTML5 音频播放器，例如 jPlayer。
【讨论】：