自定义音频标签的CSS

时间:2017-07-07 12:15:49

标签: css audio

我有这个音频控制,我试图改变玩家的颜色,但我无法定位它我发现一些帖子谈论使用javascript这样做是唯一的方法为它写css。

<audio controls class="radio-audio">
   <source src="" type="audio/mpeg"></audio>

我试着写一些这样的代码,发现它在互联网的某个地方,但我仍然没有看到任何变化。

所有这些都是悬停并且没有做太多的重点

.radio-audio:hover, .radio-audio:focus, .radio-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);
}

.radio-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;
}

2 个答案:

答案 0 :(得分:0)

目前无法使用CSS设置HTML5播放器的样式。相反,您可以关闭control属性,并使用JS实现自己的控件。如果您不想自己动手,可以使用类似jPlayer的内容。

答案 1 :(得分:0)

我已经为codepen.io准备了一个带有所有css标签的模型来访问音频对象的图形属性

link