如何更改我的输入类型范围的拇指颜色？答案

【问题标题】：How to change the color of the thumb of my input type range?如何更改我的输入类型范围的拇指颜色？
【发布时间】：2015-05-11 15:29:14
【问题描述】：

我想根据该元素的值更改输入类型范围的拇指颜色。

是否有一种简单的方法可以做到这一点？

body {
  background-color: #EDEDED;
}

.slider {
  position: relative;
  width: 300px;
  margin: 100px auto;
}

.slider svg {
  position: absolute;
  width: 24px;
}

.heart-broken {
  left: -34px;
  top: 0px;
}

.love {
  right: -34px;
  top: 0px;
}

.heart-broken path {
  fill: #FF0033;
}

.love path {
  fill: #83B348;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 2em;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: .375em;
  background-color: #222222;
  background: linear-gradient(#333333, #222222);
  outline: none;
  font: 1em trebuchet ms, verdana, arial, sans-serif;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent;
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

input[type="range"]::-moz-range-thumb {
  width: 2em;
  height: 1.2em;
  border-radius: .375em;
  border: none;
  background-image: linear-gradient(to bottom, #ADD978 0, #83B348 100%);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2em;
  height: 1.2em;
  border-radius: .375em;
  border: none;
  background-image: linear-gradient(to bottom, #ADD978 0, #83B348 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADD978), color-stop(100%, #83B348));
  background-image: -webkit-linear-gradient(top, #ADD978 0, #83B348 100%);
}

input[type="range"]::-ms-thumb {
  width: 2em;
  height: 1.2em;
  border-radius: .375em;
  border: 0;
  background-image: linear-gradient(to bottom, #ADD978 0, #83B348 100%);
}

<div class="slider">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" class="heart-broken">
<path fill="#000000" d="M32 11.192c0 2.699-1.163 5.126-3.015 6.808h0.015l-10 10c-1 1-2 2-3 2s-2-1-3-2l-9.985-10c-1.852-1.682-3.015-4.109-3.015-6.808 0-5.077 4.116-9.192 9.192-9.192 1.733 0 3.353 0.48 4.737 1.314l-2.929 4.686 7 4-4 10 11-12-7-4 2.465-3.698c0.748-0.196 1.533-0.302 2.342-0.302 5.077 0 9.192 4.116 9.192 9.192z"></path>
</svg>

  <input type='range' value='50' step='25' />
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" class="love">
<path fill="#000000" d="M32 11.192c0 2.699-1.163 5.126-3.015 6.808h0.015l-10 10c-1 1-2 2-3 2s-2-1-3-2l-9.985-10c-1.852-1.682-3.015-4.109-3.015-6.808 0-5.077 4.116-9.192 9.192-9.192 2.699 0 5.126 1.163 6.808 3.015 1.682-1.852 4.109-3.015 6.808-3.015 5.077 0 9.192 4.116 9.192 9.192z"></path>
</svg>

  
</div>

http://codepen.io/anon/pen/YXwaNV

【问题讨论】：

您可以使用javascript更改拇指伪元素的背景。但这可能并不容易。

标签： javascript html css

【解决方案1】：

你有两个选择，但我不知道这是否足够好：

你可以用input[type="range"]::-webkit-slider-thumb定义不同的css文件，并使用js动态改变：

$('link[href="style1.css"]').attr('href','style2.css');
您可以使用 http://www.w3.org/TR/DOM-Level-2-Style/Overview.html 动态更改 css 规则，例如：

document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

但提取正确的规则可能相当困难

【讨论】：

【解决方案2】：

您可以使用 javascript 将类添加到您的 input[type="range"]，因为您可以使用 javascript 直接修改此 range 的伪元素，只有类对您的情况有用！

$('input[type=range]').change(function() {
    var val = $(this).val();
    if ( val > 51 ) {
        $(this).removeClass("blue");
        $(this).addClass("red");
    } else if ( val <= 49) {
        $(this).removeClass("red");
        $(this).addClass("blue");
    } else if ( val == 50 ) {

        $('input[type=range]').removeAttr("class");
    }
});

演示：http://jsfiddle.net/r4rka4jL/1

注意：我在这个测试中使用-webkit-作为chrome。

【讨论】：