change input range color

Solutions on MaxInterview for change input range color by the best coders in the world

showing results for - "change input range color"
Clementine
26 Jul 2017
1<input type="range"/>
2
3/*Chrome*/
4@media screen and (-webkit-min-device-pixel-ratio:0) {
5    input[type='range'] {
6      overflow: hidden;
7      width: 80px;
8      -webkit-appearance: none;
9      background-color: #9a905d;
10    }
11    
12    input[type='range']::-webkit-slider-runnable-track {
13      height: 10px;
14      -webkit-appearance: none;
15      color: #13bba4;
16      margin-top: -1px;
17    }
18    
19    input[type='range']::-webkit-slider-thumb {
20      width: 10px;
21      -webkit-appearance: none;
22      height: 10px;
23      cursor: ew-resize;
24      background: #434343;
25      box-shadow: -80px 0 0 80px #43e5f7;
26    }
27
28}
29/** FF*/
30input[type="range"]::-moz-range-progress {
31  background-color: #43e5f7; 
32}
33input[type="range"]::-moz-range-track {  
34  background-color: #9a905d;
35}
36/* IE*/
37input[type="range"]::-ms-fill-lower {
38  background-color: #43e5f7; 
39}
40input[type="range"]::-ms-fill-upper {  
41  background-color: #9a905d;
42}