CSS样式<audio>

Question

有没有办法如何设置<audio>标签的时间线拇指(寻找者)？我能够使用audio::-webkit-shadow DOM伪选择器来定位和设置大部分元素.

但是,我不幸的是找到一个匹配回放时间线拇指的选择器.它是由<input type="range">另一个影子DOM元素完成的.所以基本上我试图将阴影DOM伪元素定位在另一个阴影DOM伪元素中.

我的游乐场在https://jsfiddle.net/cLwwwyh5/上.

我只需要在Chrome(Chrome应用)中使用它

Answer 1

浏览可用修饰符列表:

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

除非我错过它,否则目前似乎无法通过CSS设置时间轴拇指的样式.

但你是如此接近让所有人看起来正确,argg!因此,我建议使用像MediaElement.js这样的东西,或者在这个jsFiddle中创建自己的自定义播放器.然而,它确实带来了跨浏览器工作的额外好处,所以这就是它.