html - 如何删除 Chrome 和移动设备上音频标签的圆 Angular ?

标签 html css html5-audio

我正在使用简单的<audio>标记在我的网站上播放一些音频文件

当我在电脑上使用 Chrome 打开网站时,我看到它是一个矩形

但是如果我在手机上使用 Chrome 打开网站,我会看到它是圆 Angular 的

我希望它是一个黑色而不是白色的矩形,它在 Firefox 上已经是黑色的,但在 chrome 上它是白色的,并且有圆 Angular ,我尝试了很多不同的解决方案,但没有任何结果。

我将上传图片以澄清更多信息

my image

最佳答案

下面的 CSS 就可以了

audio::-webkit-media-controls-enclosure {
    border-radius: 0;
}
<audio controls src="https://samplelib.com/lib/preview/mp3/sample-15s.mp3"></audio>

我正在为一个网络应用程序开发一个自定义音频播放器,并遇到了同样的问题,我查看了 chromium 源代码,找到了一个适合我的解决方案,尽管问题很老,但我仍然想分享为将来面临同样问题的任何人提供解决方案

关于html - 如何删除 Chrome 和移动设备上音频标签的圆 Angular ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60923328/

相关文章:

html - 表格中图像之间的神秘空间

javascript - 如何正确使用HTML5文件阅读器onload方法

html - 不改变顺序向右浮动,强制收缩

jquery - 根据焦点从文本框外观更改为标签外观

css - 设置相对于其他元素的高度

javascript - 如何在javascript中下载具有自定义名称的mp3文件

javascript - 使用 jQuery 和 <audio>

javascript - htl5 语音录制与可视化

javascript - 加载完所有元素(由ajax调用)后如何调用函数?

javascript - Ajax 和 cookie