更改materializecss中范围滑块的颜色

Question

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我设法改变了＆＃34;拇指＆＃34;当您使用以下命令单击滑块时弹出：

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

通常我可以检查chrome上的元素并获取我必须更改的类以更改其颜色。由于某些原因，我无法弄清楚如何检查＆＃34; dot＆＃34;在滑块中找到我必须添加的类以更改其颜色。

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>

Answer 2

实现这一目标的最简单方法实际上是查看源代码。在833行和此处（https://github.com/Dogfalo/materialize/blob/master/forms.html）在Github上托管（https://github.com/Dogfalo/materialize/blob/master/sass/components/forms/_range.scss）。

在这个和我的Chrome DevTools之间，我已经设法通过这个CSS声明将范围输入的背景更改为＃4286f4（替换你的颜色）：

.noUI-connect {
  background: #4286f4 ;
}

您可能需要在属性上使用！important标志。这会改变两个.thumb元素之间滑块的颜色。

改变小拇指的颜色＆＃34;在滑块上：

.range-label{
  background-color: desired-color;
}

如果您想更改背景的灰色（选择范围以外的区域），请使用：

.noUI-background {
  background: desired-color;
}

补充警告：此解决方案仅在noUiSlider实现上进行了测试：http://materializecss.com/forms.html（滚动到Range部分）。我没有在纯HTML范围元素上测试它，遗憾的是需要重新开始工作。

编辑： 尝试在普通的html范围输入上探索解决方案后，似乎有一个带有类＆＃34;值＆＃34;的标记。在滑块上，作为.thumb的孩子。不幸的是，造型并没有引领任何地方，让我相信这是：在css属性之前/：之后，或者你的答案位于第一段中第二个链接的第73-83行之间。

Answer 3

    .noUi-connect {
    background: black;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
    background: black;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
    background-color: black;
}

check out this pen by alexventuraio

您也可以

document.querySelector('.noUi-tooltip').style.background = 'black';
document.querySelector('.noUi-handle').style.background = 'black';

使用querySelector全部更改全部。 CSS [“ .noUi-handle {...}和.noUi ...”]没有覆盖。

我是新来的人