扩大范围输入

Question

我想使用更大的光标和长条（不更长）来输入范围。

<input id="speed" type="range" min="10" max="80" />

我应该怎么办？

谢谢您的帮助。

Answer 1

截至2018年底，还没有跨浏览器的方法可以执行此操作，但是在大多数浏览器中都有完成此操作的方法。

• Firefox：::-moz-range-thumb和::-moz-range-track。
• Chrome：::-webkit-slider-thumb和::-webkit-slider-runnable-track。
• 边缘：::-ms-thumb和::-ms-track。
• Safari：不确定。

有关如何使用这些伪元素检出this CSS tricks article的更完整指南和示例

Answer 2

我认为，越大，您意味着要抓住和拖动的区域越大，所以这应该起作用：

#range {
  position: relative;
  transform: scale(1.3); /* Or however big you want it */
  transform-origin: 0 0;
}

<input type="range" id="range">

有点怪异，但有效。