Почему стили для input type="range" (бегунка) не применяется?

Question

Бегунок в данном примере должен быть красного цвета из-за background: red; , но он остаётся синим:

.slider {  
  border: 0;  
  outline: 0;  
  width: 100px;  
  background: red;  
}  

.slider::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  appearance: none; 
  width: 20px; 
  height: 20px; 
  border-radius: 50%; 
  background: red; 
  cursor: pointer; 
} 

.slider::-moz-range-thumb { 
  width: 20px; 
  height: 20px; 
  border-radius: 50%; 
  background: red; 
  cursor: pointer; 
} 

.slider::-ms-thumb { 
  width: 20px; 
  height: 20px; 
  border-radius: 50%; 
  background: red; 
  cursor: pointer; 
}

<input class="slider" type="range" min="0" max="100">

Answer 1

Для "хромоподобных" браузеров необходимо указывать свойство appearance: none, как псевдоэлементам, так и самому элементу <input>:

.slider {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  outline: 0;
  width: 100px;
  background: yellow;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  cursor: pointer;
}

.slider::-ms-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  cursor: pointer;
}

<input class="slider" type="range" min="0" max="100">

БЛОГ НА HUSL

Почему стили для input type="range" (бегунка) не применяется?

Ответы (1 шт):