html - 如何在 Chrome 和移动设备上删除音频标签的圆角？

Question

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

当我在我的电脑上用 chrome 打开我的网站时，我看到它是一个矩形

但是如果我在手机上使用 chrome 打开我的网站，我会看到它带有圆角

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

我将上传一张图片以澄清更多

标签： htmlcsshtml5-audio

Answer 1

感谢您的帮助，我通过将（媒体控制面板）背景颜色更改为灰色部分解决了问题，然后我将<audio>标签背景颜色也更改为相同颜色（我现在将其视为矩形，因为它们具有相同的背景颜色)

不幸的是，我无法将（ media-controls-panel ）背景颜色变成黑色，首先：- 因为按钮也是黑色的，而且它们真的很难看，

第二：- 因为我看到（媒体控制面板）周围有一个圆形的灰色阴影，即使我也将音频背景更改为黑色。

这是我的代码

audio::-webkit-media-controls-panel{
background-color: rgba(200,200,200,1);
width:350px;
}

<div class="player">
<audio preload="none" style="background-color:#C8C8C8;" controls 
    <source src="audio/audiofile.mp3" type="audio/mpeg">
     Your Browser Does Not Support Radio</audio>
</div>