如何在火狐浏览器中扩大input type range滑块的捕获区域？

你在Chrome里通过调整margin-top和top偏移滑块thumb的位置，实现了点击滑块外区域也能触发拖拽的效果，但Firefox的::-moz-range-thumb对位置偏移的处理逻辑不同，直接用position: relative+top无法扩展可点击区域。

解决方案代码 #

针对Firefox，我们可以通过透明边框扩展可点击区域，再用transform调整thumb的视觉位置，这样既能保持视觉上的偏移，又能让扩展的区域具备点击捕获能力：

input[type=range]::-moz-range-thumb {
  border-radius: 50%;
  height: 14px;
  width: 14px;
  border: 25px solid transparent; /* 用透明边框扩展点击区域 */
  background: red;
  transform: translateY(-25px); /* 偏移到目标位置 */
  box-sizing: border-box; /* 确保边框包含在元素尺寸内 */
}

原理说明 #

• Firefox中::-moz-range-thumb的可点击区域是元素的盒模型范围，包括边框。用透明边框扩大盒模型，就能扩展点击捕获区域。
• transform: translateY(-25px)用来把thumb的视觉位置调整到你需要的中心位置，和Chrome里top: -25px的效果一致。
• 你的原始Firefox代码里background: red后面少了分号，这会导致后续的z-index失效，建议补上。

内容的提问来源于stack exchange，提问作者uiHellen