具有自定义样式的跨浏览器垂直输入范围滑块

Question

Slider CSS可根据需要在Firefox中使用

在Chrome中不起作用

问题阐述

Here's a sample，如果使用Firefox查看，则会提供所需的结果，但如果使用Chrome查看则不会。

• 关键问题是我似乎需要为Chrome设置此功能：-webkit-appearance: slider-vertical; - 尝试将其移除并在Chrome中查看并且输入范围变为水平而非垂直
• 但结果我无法隐藏我用自定义样式替换的原生视觉效果-webkit-appearance: none;
• 我无法隐藏它们，因为它是相同的属性，即-webkit-appearance在我们的非量子CSS中不能同时为slider-vertical和none（请参阅[type='range']选择器下的内容）

Answer 1

根据this answer的建议，使用转换可使滑块垂直，因此您可以将-webkit-appearance设置为none。