跨浏览器填充范围控件的下部分

Question

举个例子，可以查看这个 fiddle (请勿在IE中查看)。

(您可以在此链接中查看该控件的描述。)

她使用 -ms-fill-lower 和-ms-fill-upper 控制滑块两侧的颜色，如下所示：

input[type=range]::-ms-track {
  width: 300px;
  height: 5px;

  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;

  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;

  /*remove default tick marks*/
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}
input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

_{(来源: brennaobrien.com)}

然而，据我所知，... ::-ms- ... 伪元素只在 IE 中有效。在 Chrome 中，上述代码似乎没有任何效果。在 Chrome 中，我只得到这个：

_{(来源: brennaobrien.com)}

我该怎么做才能跨浏览器实现这个效果呢？

谢谢！

- Andrew LaPrise

---

这些伪元素可能在IE之外不受支持。所以你无能为力。 - Paulie_D

谢谢，@Paulie_D。我的目标并不一定是使用-ms-fill-lower来实现效果。只是为了完成任务。难道没有其他元素可以代替吗？ - Andrew LaPrise

据我所知，没有这样的功能。如果有的话，可能需要使用JS。从这个角度来看——它是跨浏览器的，只是IE用户会得到更多的东西。其他浏览器的用户永远不会知道。 - Paulie_D

此帖可能与此帖重复：https://dev59.com/3nXYa4cB1Zd3GeqP-9mJ - anpsmn

Answer 1

您可以使用渐变来实现这种效果，看这里：http://codepen.io/ryanttb/pen/fHyEJ。例如：

input::-moz-range-track{
    background: linear-gradient(90deg,black 50%,grey 50%);
}

当然，您也需要使用JavaScript来更改百分比值。

- bladekp

---

这个解决方案在Safari中不起作用，而且只有其中一些在Firefox中起作用。 - MLyck

Answer 2

对于其他人来说，如果您不想要渐变的外观，那么使用HTML5现在标准的background-size是一个很好的选择。我已经根据https://www.w3schools.com/howto/howto_js_rangeslider.asp上的教程构建了我的范围。

所以我的解决方案是在CSS中：

.slidecontainer {
    display:inline-block;
    vertical-align:middle;
    width: 60%;
    position:relative;
    margin:5px 0;
    background:url('/images/cyan_back.png') no-repeat left top;
    background-size:0 14px;
    border-radius:7px;
}

然后使用jQuery：

$('.slidecontainer').css('background-size',$(this).val()+'% 14px');

我相信这也更加跨浏览器友好。

- Antony