Comment puis-je personnaliser l'apparence des curseurs d'entrée de plage HTML5 dans différents navigateurs ?

Coloration des curseurs d'entrée de plage HTML5 pour WebKit

Les navigateurs basés sur WebKit affichent un curseur d'entrée de plage natif avec une apparence cohérente. Cependant, ajouter un style personnalisé pour modifier l'apparence de ce curseur peut s'avérer difficile.

Pour Chrome :

• Astuce de débordement : Masquer le curseur par défaut en définissant le débordement : caché sur l'entrée.
• Effet d'ombre : Créez un effet d'ombre pour remplir l'espace à gauche du pouce avec la couleur souhaitée.

Pour IE et Firefox (support natif) :

• ::-ms-fill-lower: Utilisez ce pseudo-élément dans IE pour remplir la zone située sous le pouces.
• ::-moz-range-progress: Utilisez ce pseudo-élément dans Firefox pour remplir la zone devant le pouce.

Implémentation du code CSS :

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  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;
}

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

HTML Exemple :

<input type="range"/>

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!