CODEWITHSUNDEEP
cssaudio
Hesham El Masry
Hesham El Masry

Reputation: 413

customizing the css for audio tag

i have this audio control and i am trying to change even the color of the player but i can't target it i found some posts talking about doing this using javascript is that the only way to write css for it. 

<audio controls class="radio-audio">
   <source src="" type="audio/mpeg"></audio>

i tried to write some code like this found it somewhere on the internet but still i don't see any changes.

it is all hover and focus not doing much 

.radio-audio:hover, .radio-audio:focus, .radio-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);
}

.radio-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;
}

Upvotes: 2

Views: 4527

Answers (2)

Gianfrancesco Aurecchia
Gianfrancesco Aurecchia

Reputation: 780

I have prepared you on codepen.io a model with all the css tags to access the graphics properties of an audio object

link

Upvotes: 1

nachshon f
nachshon f

Reputation: 3670

Currently there is no way to style HTML5 players using CSS. Instead, you can turn off the control attribute, and implement your own controls using JS. If you don't want to do it yourself, you can use something like jPlayer.

Upvotes: 0

Related Questions