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

Question

滑块 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。