css - 如何将 HTML5 范围输入设置为在 slider 前后具有不同的颜色？

Question

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

这样的事情可能吗？

Answer 1

纯 CSS 解决方案:

• Chrome:隐藏 input[range] 的溢出，并填充所有剩余空间带有阴影颜色的拇指。
• 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;
}

<input type="range"/>