3

Is it possible to add css styles to the audio tag? I have tried but I couldn't.

Thanks.

<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>
2

2 Answers 2

6

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.

5
  • 1
    But not possible for non-webkit browsers.
    – jmc
    Nov 25, 2019 at 5:08
  • As per my final comments in my answer, there is little-to-no documentation on -moz or -ms prefixing conventions/support for the audio tag, so it is unclear if there is support in Firefox / IE. :)
    – EGC
    Nov 25, 2019 at 20:07
  • Yep Firefox doesn't support styling the player with CSS: developer.mozilla.org/en-US/docs/Web/HTML/Element/audio (see "Styling with CSS"). Nov 25, 2019 at 22:54
  • I would argue with enough persistance, nearly anything is possible: @-moz-document url-prefix() { audio { background-color: red; transform: scale(1.7); margin-left: 100px; } } Some really basic/hacky styling is possible with browser-specific tags
    – EGC
    Nov 25, 2019 at 23:16
  • This is not a complete list, its just the same one everyone copy/pastes. Heres a couple more, but I'm sure there's many more. ::-webkit-media-controls-enclosure ::-internal-media-controls-cast-button
    – Spankied
    Aug 19, 2021 at 7:59
0

You can Style the audio Tag as the answer above mentioned, but the issue is it will not have support on most of the browsers which might cause your application for not having cross browser compatibility, I suggest you to design a custom player and make functionality like the audio tag , it will more feasible for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.