填充范围控制跨浏览器的下部答案

【问题标题】：Fill lower part of range control cross-browser填充范围控制跨浏览器的下部
【发布时间】：2015-01-07 14:36:18
【问题描述】：

例如，查看this fiddle（请不要在 IE 中）。

（您可以在this link 看到该控件的说明。）

她使用 -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）}

如何实现跨浏览器的效果？

谢谢！

【问题讨论】：

IE 之外可能不支持这些伪元素。所以你无能为力。
谢谢，@Paulie_D。我的目标不一定是使用 -ms-fill-lower 来达到效果。这只是为了完成工作。有没有我可以使用的不同元素？
据我所知。如果有，它可能需要 JS。这么看 - 它是跨浏览器的，只是 IE 用户得到了更多的东西。其他浏览器的用户永远不会知道。
Possible duplicate of this post

标签： html css cross-browser slider pseudo-element

【解决方案1】：

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

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

当然你也需要 js 来改变百分比值。

【讨论】：

【解决方案2】：

对于其他发现这一点的人 - 如果您不想要渐变的褪色外观，现在使用 HTML5 标准背景大小是一个不错的选择。我已经围绕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');

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

【讨论】：