更改materializecss中范围滑块的颜色

Question

我正在使用此处的范围滑块:http://materializecss.com/forms.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>

<form action="#">
    <p class="range-field">
      <input type="range" id="test5" min="0" max="100" />
    </p>
  </form>

我设法改变了当你点击滑块时弹出的"拇指"的颜色:

input[type=range]+.thumb{
    background-color: #400090;
}

通常我可以检查chrome上的元素并获取我必须更改的类以更改其颜色.由于某些原因,我无法弄清楚如何检查滑块中的"点"以找到我必须添加的类以更改其颜色.

Answer 1

这就是我更改滑块上的点和拇指气泡颜色的方法.

附加截图和代码段

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>

<style>

  input[type=range]::-webkit-slider-thumb {
    background-color: red;
  }
  input[type=range]::-moz-range-thumb {
    background-color: red;
  }
  input[type=range]::-ms-thumb {
    background-color: red;
  }

  /***** These are to edit the thumb and the text inside the thumb *****/
  input[type=range] + .thumb {
    background-color: #dedede;
  }
  input[type=range] + .thumb.active .value {
    color: red;
  }
</style>
<form action="#">
  <p class="range-field">
    <input type="range" id="test5" min="0" max="100" />
  </p>
</form>