HTML5-Standard-Audio-Player CSS-Styling

Question

Ich versuche, die Hintergrundfarbe (so dass es 100 Transparenz hat) der Wiedergabeschaltfläche im Standard-Audio-Steuerelement mit CSS zu bearbeiten.

bereits versucht, dies:

audio::-webkit-media-controls-play-button { 
    background-color: rgba(0, 0, 0, 0.99); 
} 

Und:

audio::-webkit-media-controls-play-button { 
    background-color: rgba(0, 0, 0, 1); 
} 

Das einzige, was ich immer bin, ist ein schwarzes Quadrat, wo das Bild der Play-Taste zu verstehen ist.

Answer 1

Der Stil Selektor und Stil Sie Werke verwenden, aber da es -webkit- basiert, funktioniert nur auf Webkit-basierten Browsern, versuchen Sie in Chrome Code, habe ich versucht zu folgen und es funktionierte für mich:

<style> 
audio::-webkit-media-controls-play-button { 
    background-color: rgba(230, 230, 255, 1); 
} 
</style> 

Standardmäßig zeigt HTML5 Audio/Video Player die Standardsteuerung des Browsers an. Sie können wählen sie per CSS und Javascript zu gestalten, oder so ähnlich JPlayer verwenden, wie @Jainam vorgeschlagen, oder können Sie: MediaElement.js oder audio.js

Es gibt Unmengen von jQuery Plugins für nur tun, was Sie suchen, und wenn Wenn Sie nur einen angepassten Audio-Player anzeigen möchten, schlage ich vor, dass Sie einen davon verwenden.

Sie können sich auch beispielsweise folgende für Sie den Audio-Player individuell anzupassen: http://authenticstyle.co.uk/html5-audio-player/