title: How to customize HTML5 audio controls without using javascript (Pure CSS)
body: <p>I need to customize my HTML5 audio control like this:</p>
  
  <p><a href="https://i.stack.imgur.com/FtiN4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FtiN4.png" alt="enter image description here"></a></p>
  
  <p>Can any one solve my problem?</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>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 
  
  
  &lt;audio controls&gt;
    &lt;source src="horse.mp3" type="audio/mpeg"&gt;
  &lt;/audio&gt;
  </code></pre>