自定义CSS为<audio>标记？

Question

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

欢呼

费拉

Answer 1

目前还不能以任何方式使用CSS样式HTML5 <audio>球员。相反，您可以忽略control属性，并使用Javascript实现您自己的控件。如果你不想自己实现它们，我建议使用现有的HTML5音频播放器，如jPlayer。

Answer 2

音频标签有CSS选项。

像：html 5 audio tag width

但如果你玩它，你会看到结果可能是意想不到的 - 如2012年8月

Answer 3

的我发现纯属偶然（我是用图像的时候工作），箱形阴影，边界半径和过渡与沼气标准音频标签播放器的工作情况相当好。我有这个在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 ; 
} 

我承认这只是“挞它一点”，但它使他们的视线比已经存在更多精彩，并没有做重大fannying有关JS。

在IE中不可用，不幸的是（尚不支持转换位），但它似乎很好地降级。

Answer 4

除了其他答案中提到的box-shadow，transform和border选项之外，WebKit浏览器目前还服从-webkit-text-fill-color来设置“time elapsed”数字的颜色，但由于没有办法要设置它们的背景（可能会随平台而变化，例如某些操作系统上的反转高对比度模式），如果您在别处使用过，建议您将-webkit-text-fill-color设置为值“initial”并且音频元素正在继承此功能，否则某些用户可能会发现这些数字无法读取。