<audio>标签的自定义CSS？

Question

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

干杯

费拉

Answer 1

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

Answer 2

我偶然发现(当时我正在使用图像),盒式阴影,边框半径和过渡与沼泽标准音频标签播放器配合得非常好.我有这个在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中不可用(尚未支持转换位),但它似乎很好地降级.