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
<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
Post a Comment