CSS样式<audio>

Question

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

然而，我不幸的是找到一个匹配回放时间线拇指的选择器。它由另一个影子DOM元素<input type="range">完成。所以基本上我试图将阴影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这样的东西，或像this jsFiddle那样创建自己的自定义播放器。然而，它确实带来了跨浏览器工作的额外好处，所以这就是它。

Answer 2

我是这样做的。 jsfiddle

您可以使用CSS Filter 它有点hacky和有限，但它是我们现在能做的最好的。

以下CSS将默认颜色更改为红色，但如果它有饱和度（不是黑色，白色或灰色阴影），它会影响整个玩家甚至背景

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

因此最好单独应用更改

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);    
}

如何计算所需的 hue-rotate（）和 saturate（）

我使用默认颜色＃4285f4 并使用Photoshop的色相/饱和度来获得较慢的色调度和饱和度值。但你可以使用你拥有的任何工具或自己计算

例如使用this或this等工具转换为 HSL（色相，饱和度，亮度）

我可以看到＃4285f4 的颜色HSL值（217,89％，61％）

红色又名＃FF0000 的HSL值（0,100％，20％）

色调值范围从0到360°所以要变红我需要色调 - 旋转（143deg）（360 - 217）和饱和（10）是想要的颜色红色的100％饱和度。详细了解saturate()

对于其他元素，这里是已知的偷偷摸摸的选择器列表。

Webkit Pseudo-Element Selectors (Shadow DOM Elements)