Audio Tag
Using Pseudo-Element Selectors
Audio elements, by default, are not visible. You need to add the controls attribute for their controls to be visible.
This is how a basic audio player looks like:
<audio src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-61905/zapsplat_multimedia_alert_chime_short_musical_notification_cute_child_like_001_64918.mp3?_=1" controls="true"></audio>Audio elements have the following pseudo-element selectors in CSS:
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button
Styling the Control Panel
To style the control panel, which is the container of all the audio’s controls, you can use the selector audio::-webkit-media-controls-panel. In the example below, we use the selector to change the background color.
<audio src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-61905/zapsplat_multimedia_alert_chime_short_musical_notification_cute_child_like_001_64918.mp3?_=1" controls="true" class="audio-1"></audio>audio::media-controls-panel {
background-color: #56AEFF;
}