Add cursor: pointer to audio element

got quick: how to add cursor style to my <audio> controls? When I add them via css, the cursor only appears around the controls, not the controls themselves.

Here is the code:

 <audio class="_audio" src="http://www.somewebsite.co/assets/AudioSample-JOBS.mp3" controls="controls" autoplay="autoplay" preload="auto"></audio> 

Note: the element is created onclick via javascript, but this should not come into play ...

+4
javascript html css html5 css3
May 30 '14 at 1:48
source share
3 answers

Sorry, but you cannot configure the html media controls. What you can do is make your own control. If you are interested in a good link: http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html

+1
May 30 '14 at 12:10
source share

Just take a look at this previous SO question, it will help you a lot.

Is it possible to use the html5 audio tag style?

0
May 30 '14 at 12:16
source share

Different browsers react differently to styling an audio element.

I tested this example on Chrome 39 and IE 11 on Windows 8.1.

 audio { width:45px; height:25px; cursor:pointer } 

The cursor property works well in IE 11, but in Chrome the pointer only appears on the left side of the sound button with the specified style

0
Jan 04 '15 at 13:23
source share



All Articles