Javascript firefox中html5范围滑块中拇指和轨迹的不同z索引

对于HTML5中的“range”输入元素，有一种很好的方法可以分别设置thumb和track的样式。唯一的问题是它在不同浏览器上的工作方式不同。 丹尼尔·斯特恩在这方面做了一些工作。他还编写了一个在线工具，为跨浏览器范围输入样式生成基本css样式-，我正在使用这些样式，但在使用z-index参数时遇到了一些问题

在

webkit

样式中，通过将

position

设置为

relative

并指定

z-index

值，可以很容易地为拇指和轨迹指定不同的

z-index

值

此方法在Firefox样式中不起作用。Firefox只会忽略track和thumb的z索引值

我试图在范围滑块的下半部分绘制一个div元素，使下半部分和上半部分看起来不同。因此，实际上我希望我的z索引值是这样的

track

我已经写了一个代码笔来显示这种行为。它在Chrome/Safari中工作得很好，但在Firefox中却不行。尝试在Chrome/Safari中打开它，看看它在Firefox中的表现。

---

如何在Firefox上实现类似的行为？或者有没有其他方法可以分别为Firefox设置范围滑块的上半部分和下半部分的样式？（没有外部libs）

我知道您刚才问了这个问题，但我实际上花了一些时间来找到解决这个问题的解决方案

问题是z-index和输入范围的伪元素在Firefox和Chrome上的工作方式不同。您需要做的是使输入范围轨迹的背景透明。创建一个div

divFill

，它将复制轨迹并使其成为最低的z索引。然后，

divLowerFill

是次高的z指数。然后，将

输入

字段作为下一个最高的z索引。因为我们使输入范围的背景色是透明的，所以较低的元素应该是可见的。当然，将

thumb伪元素

设为最高的z索引

虽然我没有在IE上调试这个，但是这个概念应该是可行的。这是我对你的代码笔代码做了一些修改的代码片段

document.getElementById（“rangeinput”）.addEventListener（“input”，函数（e）{
var rangeInput=document.getElementsByClassName（“divLowerFill”）[0]；rangeInput.style.width=e.target.offsetWidth*e.target.value/100+“px”；
});
.parent{
显示：内联块；
左边距：35px；
位置：相对位置；
}
/*复制输入范围轨迹背景*/
.divFill{
位置：绝对位置；
宽度：100%；
高度：6px；
顶部：7px；
z指数：-2；
背景：#00c9ff；
}
/*轨道填土*/
迪夫洛威尔先生{
位置：绝对位置；
高度：6px；
宽度：70px；
顶部：7px；
背景色：#273042；
z指数：0；
指针事件：无；
}
/*输入范围轨迹样式设置*/
输入[类型=范围]{
-webkit外观：无；
宽度：70px；
边际：2px0；
垂直对齐：中间对齐；
位置：相对位置；
背景色：透明；
}
输入[类型=范围]：焦点{
大纲：无；
}
/*Chrome、Safari轨迹样式设置*/
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100px；
高度：6px；
光标：指针；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
边界半径：0px；
z指数：1；
边框：0px实心rgba（0,0,0,0）；
}
输入[类型=范围]：-webkit滑块拇指{
盒影：1px 1px 1px#000000，0px 0px 1px#0d0d；
边框：0px实心rgba（255、255、255、0）；
高度：10px；
宽度：10px；
边界半径：5px；
背景：#ffffff；
光标：指针；
-webkit外观：无；
页边顶部：-2px；
z指数：2000；
位置：相对位置；
}
/*Firefox曲目样式设置*/
输入[类型=范围]：-moz范围轨迹{
宽度：100%；
高度：6px；
光标：指针；
背景：不透明；
边界半径：0px；
边框：0px实心rgba（0,0,0,0）；
位置：相对位置；
z指数：-1；
}
输入[类型=范围]：-moz范围拇指{
盒影：1px 1px 1px#000000，0px 0px 1px#0d0d；
边框：0px实心rgba（255、255、255、0）；
高度：10px；
宽度：10px；
边界半径：5px；
背景：#ffffff；
/*光标：指针*/
位置：相对位置；
z指数：100；
}
/*IE样式设置*/
输入[类型=范围]：-ms轨道{
宽度：100%；
高度：6px；
光标：指针；
背景：透明；
边框颜色：透明；
颜色：透明；
}
输入[类型=范围]：-ms填充下限{
背景：#00c5fa；
边框：0px实心rgba（0,0,0,0）；
边界半径：0px；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
}
输入[类型=范围]：-ms填充上限{
背景：#00c9ff；
边框：0px实心rgba（0,0,0,0）；
边界半径：0px；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
}
输入[类型=范围]：-ms thumb{
盒影：1px 1px 1px#000000，0px 0px 1px#0d0d；
边框：0px实心rgba（255、255、255、0）；
高度：10px；
宽度：10px；
边界半径：5px；
背景：#ffffff；
光标：指针；
高度：6px；
z指数：2000；
位置：相对位置；
}
输入[类型=范围]：焦点：-毫秒填充下限{
背景：#00c9ff；
}
输入[类型=范围]：焦点：--ms填充上限{
背景：#05caff；
}
是的，这确实有效，尽管当时我们使用了基于div的完整解决方案，但没有使用范围滑块