How to customize HTML5 audio controls without using javascript (Pure CSS)

Question

I need to customize my HTML5 audio control like this:

Can any one solve my problem?

Here is what I have so far:

audio::-webkit-media-controls-panel
{
 background-color:powderblue;
}
// 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-enclosure
// 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 


<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

Answer 1

We are forced to use per browser special css like you shown, to modify button aspects. This is built-in in browser.

It would be easier to make the button yourself and control with js (very easy nowadays, no need for a plugin). onclick="player.play()" for example.

Or we can hack the apparence with css filters on them. It won't change the aspect but add some effects, try to mouse over the button.

For the example, button and some details are on the same green, obtained with the hue-filter. It will actually render greeny on all browsers.

The invert filter will display in black if the default is white, etc. .

audio {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(46deg) invert(12%);
  }

<audio 
       controls
       src="http://www.ektoplazm.com/mp3/cybered-and-opsy-children-of-paradise.mp3"></audio>

See this script i use to make, to see what is doable with css filters.

https://codepen.io/Nico_KraZhtest/pen/bWExEB

Edit: See the following simple base javascript solution: clicking the image will start the (hidden) player...

audio {width:0px}
img {cursor:pointer}

<audio 
       id="player"
       controls
       src="http://www.ektoplazm.com/mp3/cybered-and-opsy-children-of-paradise.mp3"></audio>

<img onclick="player.play()" src="https://i.stack.imgur.com/6pUED.png">