Question

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

在webkit样式中，通过将z-index设置为position并指定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-index。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: