CSS 样式 <音频>答案

【问题标题】：CSS style <audio>CSS 样式 <音频>
【发布时间】：2016-02-07 21:18:57
【问题描述】：

有没有办法设置<audio> 标签的时间线拇指（搜索器）？我可以使用audio::-webkit- shadow DOM 伪选择器来定位和设置大部分元素的样式。

但是，我很不幸地找到了与播放时间线拇指匹配的选择器。这是由另一个影子 DOM 元素 <input type="range"> 完成的。所以基本上我试图在另一个影子 DOM 伪元素中定位影子 DOM 伪元素。

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

我只需要它在 Chrome（Chrome 应用程序）中工作

【问题讨论】：

嵌套的阴影元素被指定-webkit-user-modify: read-only;有一个ticket from 2012似乎还没有被推送...
我了解user-modify 与更改元素样式的能力无关。
不完全确定，但很难相信改进的 CSS 规则以解决他们在票证中引用的嵌套 -webkit-slider-thumb 元素尚未实施。也许在另一个补丁中.. 可惜如果不是因为你离你想要实现的目标太近了..
有几个人建议组合伪选择器，如下所述：stackoverflow.com/questions/24610177/…。但是，这对我也不起作用（Chrome 48）。
是的，我知道，这就是我提到嵌套元素问题的原因

标签： css html5-audio

【解决方案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 那样创建自己的自定义播放器，这让我很痛苦。然而，它确实带来了跨浏览器工作的额外好处，所以就是这样。

【讨论】：

我恐怕最后还是会按照你的建议坚持使用第三部分播放器或自己制作。最终我可能会使用<input type="range"> 让我自己的播放器让事情变得更容易一些，因为它不会嵌套在<audio> shadow DOM 中，我可以直接使用 shadow DOM 伪选择器对其进行样式设置。
非常有帮助，尤其是 Chrome 刚刚将 Material Design 推到了 Mac 上。您如何确定可用的修饰符？

【解决方案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°，所以要变成红色，我需要 hue-rotate(143deg) (360 - 217) 和 saturate(10) 是所需颜色红色的 100% 饱和度。阅读更多关于saturate()

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

Webkit Pseudo-Element Selectors (Shadow DOM Elements)

【讨论】：