Как убрать закругленные углы аудиометки на Chrome и мобильном устройстве?

Question

Я использую простой тег <audio> для воспроизведения некоторых аудиофайлов на моем веб-сайте.

. Я вижу его в виде прямоугольника, когда открываю свой сайт с помощью chrome на моем P C

но я вижу его с закругленными углами, если я открываю свой веб-сайт с 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>