Menu
is there a way how to style timeline thumb (seeker) of an <audio> tag? I'm able to target and style most of the element using audio::-webkit- shadow DOM pseudo selectors.
However, I was unlucky finding a selector to match the playback timeline thumb. It's done by <input type="range">, another shadow DOM element. So basically I'm trying to target shadow DOM pseudo element inside another shadow DOM pseudo element.
My playground is on https://jsfiddle.net/cLwwwyh5/.
I just need this to work in Chrome (Chrome App)
493
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.
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.
Going through the list of available modifiers:
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
Unless I'm missing it, styling the timeline thumb through CSS doesn't seem possible at the moment.
But you're so close to getting it all to look right, argg! It therefore pains me to advise using something like MediaElement.js, or creating your own custom player like in this jsFiddle. It does, however, come with the added bonus of working cross-browser, so that's something.
93
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
