firefox中html5范围滑块中拇指和轨道的不同z-index

Question

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

在webkit样式中,z-index通过设置positionto relative和赋值,可以轻松地为拇指和轨迹赋予不同的z-index值.

此方法在Firefox样式中不起作用.Firefox只会忽略轨道和拇指的z-index值.

我试图在范围滑块的下半部分绘制一个div元素,使下半部分和上半部分看起来不同.所以我希望我的z-index值是这样的track < div < thumb

我写了一个codepen来显示这种行为.它完全适用于Chrome/Safari,但不适用于Firefox.尝试在Chrome/Safari中打开它,看看它在Firefox中应该如何表现. http://codepen.io/anon/pen/vOmQxr

我如何实现Firefox的类似行为？或者还有其他方法可以为Firefox分别设置范围滑块的上半部和下半部的样式吗？(没有外部库)

Answer 1

我知道你刚才问过这个问题,但实际上我花了一些时间为这个问题找到一个解决方法.

问题是z-index,输入范围的伪元素在Firefox和Chrome上的工作方式不同.您需要做的是使输入范围轨道的背景透明.创建一个div divFill,它将复制轨道并使其成为最低的z-index.然后,divLowerFill是下一个最高的z指数.之后,将该input字段作为下一个最高的z-index.由于我们将输入范围的背景颜色设置为透明,因此下部元素应该是可见的.当然,要thumb pseudo element使其成为最高的z指数.

虽然我没有在IE上调试这个,但这个概念应该可行.这是我对您的Codepen代码进行了一些修改的代码片段.

document.getElementById("rangeinput").addEventListener("input", function(e){
var rangeInput=document.getElementsByClassName("divLowerFill")[0];             rangeInput.style.width=e.target.offsetWidth*e.target.value/100 +"px";
});

.parent {
  display:inline-block;
  margin-left: 35px;
  position:relative;
}

/* repplicating input range track background */
.divFill {
  position: absolute;
  width: 100%;
  height: 6px;
  top: 7px;
  z-index: -2;
  background: #00c9ff;
}

/* track fill */
.divLowerFill {
  position: absolute;
  height: 6px;
  width: 70px;
  top: 7px;
  background-color: #273042;
  z-index: 0;
  pointer-events:none;

}

/* input range track style settings */
input[type=range] {
  -webkit-appearance: none;
  width: 70px;
  margin: 2px 0;
  vertical-align: middle;
  position: relative;
  background-color: transparent;
}
input[type=range]:focus {
  outline: none;
}

/* Chrome, Safari track style settings */
input[type=range]::-webkit-slider-runnable-track {
  width: 100px;
  height: 6px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border-radius: 0px;
  z-index: 1;
  border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0px solid rgba(255, 255, 255, 0);
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -2px;
  z-index: 2000;
  position: relative;
}

/* Firefox track style settings */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: none transparent;
  border-radius: 0px;
  border: 0px solid rgba(0, 0, 0, 0);
  position: relative;
  z-index: -1;

}
input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0px solid rgba(255, 255, 255, 0);
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #ffffff;
  /*cursor: pointer;*/
  position: relative;
  z-index: 100;

}

/* IE style settings */
input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #00c5fa;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #00c9ff;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0px solid rgba(255, 255, 255, 0);
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  height: 6px;
  z-index: 2000;
  position: relative;

}
input[type=range]:focus::-ms-fill-lower {
  background: #00c9ff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #05caff;
}

<div class="parent">
  <div class="divFill"></div>
  <div class="divLowerFill"></div>
  <input id="rangeinput" type="range" min=0 max=100 value=100>
</div>