风格html5音频播放器

Question

我想要的改变是

border-radius:0px

我尝试：

<audio id="player" controls>
    <!--<source src="horse.ogg" type="audio/ogg">-->
    Your browser does not support the audio element.
</audio>

#player {
    border-radius:0px;
}

没有效果。

任何建议都会有用。

Answer 1

border-radius: 0px

在 Firefox 中完美运行。
但在 chrome 中似乎没有效果。使用下面的方法稍微减小半径。

#player{
background-color: #f1f3f4;
}

我的意思是改变背景与玩家背景相同。

Answer 2

您可以使用此 webkit 来更改它

audio::-webkit-media-controls-enclosure {
    border-radius: 0;
    background-color: rgb(138, 194, 194);
}