CSS样式<audio>
有没有办法设计一个<audio>标签的时间轴缩略图(搜索者)？我可以使用audio::-webkit-阴影DOM伪选择器来确定大多数元素的目标和样式。
然而，不幸的是，我发现了一个选择器来匹配播放时间线拇指。这是由<input type="range">完成的，它是另一个影子DOM元素。因此，基本上我尝试将阴影DOM伪元素定位在另一个阴影DOM伪元素中。
我的游乐场在https://jsfiddle.net/cLwwwyh5/上。
我只需要这在Chrome (Chrome应用程序)中工作
回答 2
Stack Overflow用户
发布于 2016-02-08 12:54:13
浏览可用修饰符的列表：
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一样创建自己的自定义播放器，这让我很痛苦。然而，它确实带来了跨浏览器工作的额外奖励，所以这是一些东西。
Stack Overflow用户
发布于 2016-12-20 18:47:52
我是这样做的。jsfiddle
你可以使用CSS Filter，它有一点老套和有限，但这是我们现在能做的最好的了。
下面的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);
}如何计算所需的色调-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()的更多信息
对于其余的元素，这里有一个已知的偷偷摸摸的选择器列表。
https://stackoverflow.com/questions/35259242
复制相似问题
腾讯云开发者
