为 <audio> 标签自定义 CSS？

Question

我正在构建一个音乐播放器的 Web 应用程序，它使用 HTML5 音频标签实现。但是我希望在不同的浏览器上都能保持一致的外观 - 请问是否可以定义自己的自定义 CSS 样式？如果可以，如何实现？

- Fela Maslen

---

选项目前非常有限，但您可以使用“outline”来使其更加突出。 - Pikamander2

这个回答解决了你的问题吗？是否可以为HTML5音频标签添加样式？ - user202729

Answer 1

目前还没有办法使用CSS样式来美化HTML5的<audio>播放器。相反地，您可以省略control属性，并使用JavaScript实现自己的控件。如果您不想全部自己实现，我建议您使用现有的可主题化的HTML5音频播放器，例如jPlayer。

- Brian Campbell

---

此答案已过时，你可以使用一些晦涩的CSS选择器来为音频元素设置样式。 - Spankied

Answer 2

我偶然发现（当时我正在处理图像），box-shadow、border-radius和transitions非常适用于普通的音频标签播放器。我已经在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);
}

with：-

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不支持（还没有支持转换部分），但它似乎能够很好地降级。

- Spike

Answer 3

你可以使用一些不太常见的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 {}

尚未找到详尽的列表，但这里是最接近的东西。

- Spankied

Answer 4

除了其他答案中提到的盒子阴影、变换和边框选项，WebKit 浏览器目前还遵守 -webkit-text-fill-color 来设置“时间经过”的数字的颜色，但由于没有办法设置它们的背景（可能会因平台而异，例如某些操作系统上的反相高对比模式），建议您将 -webkit-text-fill-color 设置为“initial”值，如果您已在其他地方使用它并且音频元素正在继承此值，否则一些用户可能会发现这些数字无法阅读。

- Silas S. Brown

Answer 5

音频标签有CSS选项。

例如：html 5音频标签宽度

但是，如果你尝试一下，你会发现结果可能出乎意料 - 截至2012年8月。

- geektard

---

我认为OP正在寻找仅适用于音频的CSS规则，以便他可以赋予其可定制的外观。虽然通用规则如宽度是适用的，但并不足够。 - james.garriss