CSS style <audio>

Question

Is there a way like thumb style of a timeline (crawler) of an <audio> ? I can customize and style most of the element using the pseudo-selectors audio::-webkit- shadow DOM.

However, I was not lucky to find a selector to fit the finger of the playback timeline. This is done using <input type="range"> , another DOM element for the shadow. So basically I'm trying to set up a shadow DOM pseudo-element inside another DOM pseudo-element.

My playground is at https://jsfiddle.net/cLwwwyh5/ .

I just need this to work in Chrome (Chrome app)

Answer 1

Looking 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 

If I don’t miss it, then the thumb display style in CSS is not possible at the moment.

But you're so close to making it all look right, argg! Therefore, it pains me to advise using something like MediaElement.js or creating your own custom player, for example, in this jsFiddle . However, it comes with the added bonus of a cross browser, so something.

Answer 2

This is how I do it. jsfiddle

You can use CSS Filter. This is a little hacky and limited, but this is the best we can do right now.

the following CSS changes the default color to red, but it affects the entire player even in the background if it is saturated (not black, white or shade of gray)

 audio::-webkit-media-controls-panel { background: transparent; -webkit-filter: hue-rotate(143deg) saturate(10); } 

therefore it is better to apply the changes separately

 audio::-webkit-media-controls-volume-slider { -webkit-filter: hue-rotate(143deg) saturate(10); } audio::-webkit-media-controls-timeline { -webkit-filter: hue-rotate(143deg) saturate(10); } 

How to calculate the desired hue-rotation () and saturate ()

I took the default color # 4285f4 and used Photoshop Hue / Saturation to get the wanter degrees and saturation value. but you can use any tool that you have, or calculate it yourself.

for example using tools like this or this , which converts to HSL (Hue, Saturation, Lightness)

I see that color # 4285f4 is HSL (217, 89%, 61%)

color red aka # FF0000 is HSL (0, 100%, 20%)

The hue value varies from 0 to 360 °, so to achieve red color I need a hue-rotation (143deg) (360 - 217) and saturated (10) 100% saturation of the desired red color. Learn more about saturate ()

---

for the rest of the elements, here is a list of known subselect selectors.

Webkit pseudo-element selector (Dome DOM elements)