Кастомизация <input type=“range”>

121

26 декабря 2020, 22:20

Как <input type="range"> удалить бегунок и изменить цвет полоски? (аналог progress на скрине)

Answer 1

.range { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background: #444; 
    height: 3px; 
    vertical-align: bottom; 
} 
 
.range::-webkit-slider-thumb { 
    -webkit-appearance: none; 
} 
 
.range::-moz-range-thumb { 
    width: 0; 
    height: 0; 
    border: 0; 
} 
    
.range::-ms-thumb { 
    width: 0; 
    height: 0; 
    border: 0; 
}