更改範圍滑塊的顏色m​​aterializecss

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

而且通常我可以檢查鉻上的元素，並得到什麼類我h要改變它的顏色。出於某些原因，我無法弄清楚如何檢查滑塊中的「點」以找到我要添加的類來更改其顏色。

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

解決這個問題的最簡單方法實際上是通過查看源代碼。在這裏（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 ; 
} 

您可能需要使用！該物業的重要標誌。這改變了兩個.thumb元素之間的滑塊的顏色。

要更改滑塊上的小「大拇指」的顏色：

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

如果你想改變背景（外選擇區域）的灰度色，使用此：

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

附加警告：此解決方案僅在noUiSlider實施中進行了測試：http://materializecss.com/forms.html（滾動到「範圍」部分）。我還沒有在一個簡單的HTML範圍元素上測試過，並且很遺憾需要重新開始工作。

編輯： 試圖探索在純html範圍輸入的解決方案，似乎有滑塊上的類「價值」的標籤，作爲.thumb的孩子。不幸的是，這種風格並沒有導致任何地方，導致我相信這是一個：之前/：在css屬性之後，或者你的答案位於第一段第二個鏈接的第73-83行之間。