在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

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

附上截图和sn-p

<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

    .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 all 改变所有。 CSS [" .noUi-handle{...} and .noUi..."] 没有被覆盖。

我是堆栈新手

Answer 3

解决这个问题的最简单方法实际上是查看源代码。托管在这里 (https://github.com/Dogfalo/materialize/blob/master/forms.html) 在第 833 行和这里 (https://github.com/Dogfalo/materialize/blob/master/sass/components/forms/_range.scss) 在 Github 上。

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

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

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

更改滑块上小“拇指”的颜色：

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

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

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

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

编辑： 尝试在纯 html 范围输入上探索解决方案后，滑块上似乎有带有“值”类的标签，作为 .thumb 的子项。不幸的是，这个样式并没有导致任何地方，让我相信这是一个 :before/:after css 属性，或者你的答案位于第一段第二个链接的第 73-83 行之间。