Custom CSS for audio tag

Question

I m building a music player web application which implements the HTML5 audio tag  however would like it to look consistent across browsers - is it possible to define my own custom CSS  And how   cheers  Fela

User · Accepted Answer

There is not currently any way to style HTML5  lt audio gt  players using CSS  Instead  you can leave off the control attribute  and implement your own controls using Javascript  If you don t want to implement them all on your own  I d recommend using an existing themeable HTML5 audio player  such as jPlayer

User · Answer

There are CSS options for the audio tag   Like  html 5 audio tag width  But if you play around with it you ll see results can be unexpected - as of August 2012

User · Answer

I discovered quite by accident  I was working with images at the time  that the box-shadow  border-radius and transitions work quite well with the bog-standard audio tag player  I have this working in Chrome  FF and Opera   audio hover  audio focus  audio active   -webkit-box-shadow  15px 15px 20px rgba 0 0  0  0 4   -moz-box-shadow  15px 15px 20px rgba 0 0  0  0 4   box-shadow  15px 15px 20px rgba 0 0  0  0 4   -webkit-transform  scale 1 05   -moz-transform  scale 1 05   transform  scale 1 05       with -  audio   -webkit-transition all 0 5s linear  -moz-transition all 0 5s linear  -o-transition all 0 5s linear  transition all 0 5s linear  -moz-box-shadow  2px 2px 4px 0px  006773  -webkit-box-shadow   2px 2px 4px 0px  006773  box-shadow  2px 2px 4px 0px  006773  -moz-border-radius 7px 7px 7px 7px   -webkit-border-radius 7px 7px 7px 7px   border-radius 7px 7px 7px 7px       I grant you it only  tarts it up a bit   but it makes them a sight more exciting than what s already there  and without doing MAJOR fannying about in JS   NOT available in IE  unfortunately  not yet supporting the transition bit   but it seems to degrade nicely

User · Answer

Besides the box-shadow  transform and border options mentioned in other answers  WebKit browsers currently also obey -webkit-text-fill-color to set the colour of the  time elapsed  numbers  but since there is no way to set their background  which might vary with platform  e g  inverted high-contrast modes on some operating systems   you would be advised to set -webkit-text-fill-color to the value  initial  if you ve used it elsewhere and the audio element is inheriting this  otherwise some users might find those numbers unreadable

[css] Custom CSS for <audio> tag?

Examples related to css

Examples related to audio

Examples related to html

Examples related to html5-audio