css - Changing the color of the range slider in materializecss -


i'm using range slider here: 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>

and managed change color of "thumb" pops when click on slider using this:

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

and can inspect element on chrome , class have change change color. reasons can't figure out how inspect "dot" in slider find class have add change color.

this did change dot on slider , thumb bubble colors.

screenshot , snippet attached

enter image description here

<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 edit thumb , text inside 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>


Comments

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -