This is possible!
audio::-webkit-media-controls-panel {
background-color: coral;
}
<li class="music">
<div class="podcast">
<div class="img-episodes-container">
<img src="images/podcast1.jpg" alt="microfono">
</div>
<h4>Lorem, ipsum dolor.</h4>
<audio controls>
<source src="sounds/sound1.mp3">
</audio>
</div>
</li>
Here is the full list:
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button
As per this incomplete answer: Is it possible to style html5 audio tag?
Please note these are the Chrome / Webkit supported tags. There may or may not be Firefox / IE11 supported tags for the audio
element as there is little-to-no documentation on -moz
or -ms
prefixing conventions/support for this tag.