Comment puis-je styliser les entrées de plage HTML5 avec deux couleurs distinctes (vert et gris) ?

Style des entrées de plage HTML5 avec des couleurs distinctes

Problème :

Pour obtenir une entrée de plage visuellement attrayante, où la gauche le côté est vert et le côté droit est gris.

Solution :

L'obtention de cet effet nécessite un style spécifique au navigateur. Bien que des solutions CSS pures soient possibles, elles varient en fonction du navigateur ciblé.

Solution CSS pour Chrome :

• Masquer le débordement de l'entrée[plage].
• Remplissez l'espace précédent du pouce avec la couleur de gauche souhaitée à l'aide d'un shadow.

Solution CSS pour IE :

• Utilisez le pseudo-élément ::-ms-fill-lower intégré pour définir le couleur du côté gauche.

Solution CSS pour Firefox :

• Utilisez le pseudo-élément ::-moz-range-progress intégré pour définir la couleur du côté gauche.

Exemple de code :

/* Chrome */
input[type='range']::-webkit-slider-thumb {
  box-shadow: -80px 0 0 80px #43e5f7;
}

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

/* Firefox */
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}

Ce code CSS garantit que le côté gauche de l'entrée de la plage est vert et que le côté droit reste gris, fournissant l'effet visuel souhaité.

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!