Add cursor: pointer to audio element

Question

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 ...

Answer 1

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

Answer 2

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?

Answer 3

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