Question

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

欢呼声

费拉

Answer 1

目前没有任何方法可以使用CSS设置HTML5 <audio>播放器的样式。相反，您可以不使用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中不可用（尚未支持转换位），但它似乎很好地降级。

Answer 3

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

Answer 4

音频标签有CSS选项。

赞：html 5 audio tag width

但是，如果你玩它，你会看到结果可能是意料之外的 - 截至2012年8月。

<audio>标签的自定义CSS？</audio>

4 个答案: