如何设置 HTML5 范围输入的样式以在滑块前后具有不同的颜色? [英] How to style HTML5 range input to have different color before and after slider?

问题描述

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

I want the left side to be green and the right side to be gray. As pictured above would be PERFECT. Preferably a pure CSS solution (only need to worry about WebKit).

这种事情有可能吗?

推荐答案

纯CSS解决方案:

• Chrome: 隐藏 input[range] 的溢出，并填充所有剩余空间带有阴影颜色的拇指.
• IE:无需重新发明轮子:::-ms-fill-lower
• Firefox 无需重新发明轮子:::-moz-range-progress

• Chrome: Hide the overflow from input[range], and fill all the space left to thumb with shadow color.
• IE: no need to reinvent the wheel: ::-ms-fill-lower
• Firefox no need to reinvent the wheel: ::-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"/>

这篇关于如何设置 HTML5 范围输入的样式以在滑块前后具有不同的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！