Menu
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?
798
Add the CSS Styles . audio-player { --player-button-width: 3em; --sound-button-width: 2em; --space: . 5em; ... } The --sound-button-width will be used for the width of the sound button, and --space will be used to add space between the track and the button.
HTML 5 audio tags can be styled. By using the audio tag with “controls” attribute, the default browsers player is used. You can customize by not using the browsers controls. You can also add CSS classes to each one of the elements and style them accordingly.
Currently, you cannot change the color of the controls of the HTML5 audio tag. If you enable the controls attribute, the appearance of the 'play', 'pause', and 'volume' will be dependent on the browser.
CSS works on it. Try 'background-color'. It doesn't change the color entirely, but changes the color behind the grey control, so in the end, it looks like a darker version of whatever you choose. Also, try box shadow and border radius.
There is not currently any way to style HTML5 <audio> 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.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
