css - 具有自定义样式的跨浏览器垂直输入范围 slider

Question

Slider CSS 可以在 Firefox 中正常运行

不适用于 Chrome

问题阐述

Here's a sample ，如果使用 Firefox 查看，会给出预期的结果，但如果使用 Chrome 查看，则不会。

• 关键问题是我似乎需要为 Chrome 使用这个:-webkit-appearance: slider-vertical; - 尝试在示例中删除它并在 Chrome 和输入范围中查看它变得水平而不是垂直
• 但结果是我无法隐藏已用自定义样式替换的原生视觉效果，使用 -webkit-appearance: none;
• 我不能隐藏它们，因为它是相同的属性，即 -webkit-appearance 不能同时是 slider-vertical 和 none非量子 CSS(参见 [type='range'] 选择器下方)

Answer 1

如 this answer 中的建议, 使用 transform 使 slider 垂直，因此您可以将 -webkit-appearance 设置为 none。