如何设置 HTML5 范围输入的样式以在滑块前后具有不同的 colored颜色

发布于07月03日

在此处输入图像描述

我希望左边是绿色，右边是灰色.如上图所示，这将是完美的.最好是纯CSS解决方案(只需要担心WebKit).

这可能吗？

推荐答案

Pure CSS解决方案:

Chrome:隐藏从input[range]开始的溢出，并将剩余的所有空间填满带有阴影 colored颜色的拇指.
IE:不需要重新发明轮子:::-ms-fill-lower
Firefox不需要重新发明轮子:::-moz-range-progress

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}