如何在 Chrome/Safari 中为滑块设置 CSS 样式？答案

【问题标题】：How to set the CSS styles for the slider thumb in Chrome/Safari?如何在 Chrome/Safari 中为滑块设置 CSS 样式？
【发布时间】：2016-12-06 20:37:01
【问题描述】：

这不起作用：

input[type=range]:focus::-webkit-slider-thumb {
    background-color: green;
}

我无法为 Chrome/Safari 中的滑块设置样式。我该怎么做？

【问题讨论】：

添加 jsfiddle/sn-p/something
不符合您的目的？！你的目的是寻求帮助。如果您需要帮助 - 提供所需的基础知识。
我真的很抱歉。结果并不好。我的观点是，正如我的回答一样，滑块拇指的 -webkit、-moz 或 -ms 样式不能在我正在处理的网站中使用，并且在大多数情况下不推荐使用。请看：developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-thumb
这真的不是真的。
实际上很多人在生产中使用它。您只需要知道并非所有浏览器看起来都一样（您可以查看 gmail 在 ie7-8-9-10-11/firefox/chrome/safari 上的外观）。差异主要是由于使用了非标准功能。

标签： css google-chrome slider

【解决方案1】：

所以我在这里遇到了这个答案：此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-thumb

【讨论】：