自定义CSS 标签？

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月。