html – 填充范围控制跨浏览器的下半部分

2023年11月30日 123次阅读

例如,请查看
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;
}

The result (in IE) http://brennaobrien.com/assets/blog/custom-slider-ie-updated.png

但是,据我所知,… :: – ms- …伪元素仅适用于IE.在Chrome中,上面的代码似乎没有任何效果.在Chrome中,我最终得到了这个：

The result (in Chrome) http://brennaobrien.com/assets/blog/custom-slider.png

我可以做些什么来实现跨浏览器的这种效果？

谢谢！

最佳答案 你可以使用渐变来实现这个效果,请看这里：
http://codepen.io/ryanttb/pen/fHyEJ

例如：

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

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

点赞