Puis-je styliser une entrée de plage HTML5 avec deux couleurs différentes en utilisant uniquement CSS ?

Style d'entrée de plage HTML5 avec différentes couleurs

Question :

Est-il possible de styliser une entrée de plage HTML5 pour avoir des couleurs différentes de chaque côté du curseur ? Par exemple, vert à gauche et gris à droite ? Idéalement, une solution CSS pure serait préférable, compatible avec les navigateurs WebKit.

Solution :

Absolument, réaliser cette personnalisation avec du CSS pur est réalisable. Notre solution exploite les propriétés CSS spécifiques au navigateur pour cibler différents navigateurs :

Chrome :

input[type='range'] {
  overflow: hidden;
  width: 80px;
  -webkit-appearance: none;
  background-color: #9a905d;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  color: #13bba4;
  margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
  width: 10px;
  -webkit-appearance: none;
  height: 10px;
  cursor: ew-resize;
  background: #434343;
  box-shadow: -80px 0 0 80px #43e5f7;
}

Firefox :

input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}

Internet Explorateur :

input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

Extrait HTML :

<input type="range"/>

Cet extrait de code créera une entrée de plage avec un côté gauche vert et un côté droit gris . Pour bénéficier de fonctionnalités complètes dans tous les principaux navigateurs, assurez-vous d'inclure tous les blocs de code spécifiques au navigateur fournis.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!