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

Question

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

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

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

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

我会上传一张图片来澄清更多

Answer 1

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

不幸的是，我无法将（媒体控制面板）背景颜色变成黑色，首先：- 因为按钮也是黑色的，而且它们真的很难看，

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

这是我的代码

 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>