Html <audio> 标签的自定义 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3794682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom CSS for <audio> tag?
提问by Fela Maslen
I'm building a music player web application which implements the HTML5 audio tag, however would like it to look consistent across browsers - is it possible to define my own custom CSS? And how?
我正在构建一个实现 HTML5 音频标签的音乐播放器 Web 应用程序，但是希望它在浏览器中看起来一致 - 是否可以定义我自己的自定义 CSS？如何？
cheers
干杯
Fela
费拉
回答by Brian Campbell
There is not currently any way to style HTML5 <audio>players using CSS. Instead, you can leave off the controlattribute, and implement your own controls using Javascript. If you don't want to implement them all on your own, I'd recommend using an existing themeable HTML5 audio player, such as jPlayer.
目前没有任何方法可以<audio>使用 CSS来设置 HTML5播放器的样式。相反，您可以不使用该control属性，并使用 Javascript 实现您自己的控件。如果您不想自己实现它们，我建议您使用现有的可主题化的 HTML5 音频播放器，例如jPlayer。
回答by Spike
I discovered quite by accident (I was working with images at the time) that the box-shadow, border-radius and transitions work quite well with the bog-standard audio tag player. I have this working in Chrome, FF and Opera.
我很偶然地发现（当时我正在处理图像）框阴影、边界半径和过渡与沼泽标准音频标签播放器配合得很好。我在 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 ;
}
I grant you it only "tarts it up a bit", but it makes them a sight more exciting than what's already there, and without doing MAJOR fannying about in JS.
我承认它只是“有点刺激”，但它使它们比已有的景象更令人兴奋，并且无需在 JS 中做主要的花哨。
NOT available in IE, unfortunately (not yet supporting the transition bit), but it seems to degrade nicely.
不幸的是，在 IE 中不可用（尚不支持转换位），但它似乎降级得很好。
回答by Silas S. Brown
Besides the box-shadow, transform and border options mentioned in other answers, WebKit browsers currently also obey -webkit-text-fill-color to set the colour of the "time elapsed" numbers, but since there is no way to set their background (which might vary with platform, e.g. inverted high-contrast modes on some operating systems), you would be advised to set -webkit-text-fill-color to the value "initial" if you've used it elsewhere and the audio element is inheriting this, otherwise some users might find those numbers unreadable.
除了其他答案中提到的 box-shadow、transform 和 border 选项之外，WebKit 浏览器目前也遵循 -webkit-text-fill-color 来设置“经过时间”数字的颜色，但由于无法设置它们的背景（这可能因平台而异，例如某些操作系统上的倒置高对比度模式），如果您在其他地方使用过它和音频元素，建议您将 -webkit-text-fill-color 设置为值“初始”正在继承这一点，否则一些用户可能会发现这些数字不可读。
回答by geektard
There are CSS options for the audio tag.
音频标签有 CSS 选项。
Like: html 5 audio tag width
But if you play around with it you'll see results can be unexpected - as of August 2012.
但是，如果您使用它，您会发现结果可能出乎意料 - 截至 2012 年 8 月。
