css - 自定义 CSS 为标签？

Question

我正在构建一个实现 HTML5 音频标签的音乐播放器 Web 应用程序，但是希望它在浏览器中看起来一致 - 是否可以定义我自己的自定义 CSS？如何？

Answer 1

目前没有任何方法可以<audio>使用 CSS 来设置 HTML5 播放器的样式。相反，您可以放弃该control属性，并使用 Javascript 实现您自己的控件。如果您不想自己实现所有这些，我建议您使用现有的可主题化 HTML5 音频播放器，例如jPlayer。

Answer 2

我很偶然地发现（当时我正在处理图像），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 中不可用（还不支持转换位），但它似乎很好地降级了。

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 {}

还没有找到这些的详尽列表，但这是最接近的。

Answer 4

除了其他答案中提到的 box-shadow、transform 和 border 选项外，WebKit 浏览器目前还遵循 -webkit-text-fill-color 来设置“经过时间”数字的颜色，但由于无法设置它们的背景（可能因平台而异，例如某些操作系统上的反转高对比度模式），如果您在其他地方使用过 -webkit-text-fill-color 和音频元素，建议您将 -webkit-text-fill-color 设置为值“initial”正在继承这个，否则一些用户可能会发现这些数字不可读。

Answer 5

音频标签有 CSS 选项。

喜欢：html 5 音频标签宽度

但是，如果您使用它，您会看到结果可能出乎意料 - 截至 2012 年 8 月。