siehe auch blog.shahednasser.com
Es gibt zwar eine Menge an CSS Eigenschaften für das Audio und Video Tag, aber diese greifen nicht in allen Browsern. Vor allen Dingen Chrome lässt kaum Gestaltungen zu.
Wer die komplette Gestaltungsfreiheit haben möchte kann auf eine alternative Lösung mit Javascript zurückgreifen, dazu habe ich ein ausführliches Step by Step Tutorial Javascript Audio.
<audio preload controls> <source src="media/audio/test.ogg"> <source src="media/audio/test.mp3"> </audio>
CSS
audio::-webkit-media-controls-panel {
background-image: linear-gradient(180deg,rgba(135,141,164,1.00) 0%,rgba(68,68,99,1.00) 100%);
}
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