Comment puis-je styliser les entrées de plage HTML5 avec différentes couleurs de chaque côté ?

Styliser les entrées de plage HTML5 avec différentes couleurs de chaque côté

Obtenir des couleurs variables avant et après le curseur d'une entrée de plage HTML5 nécessite un navigateur- spécifique approches.

Chrome :

• Masquer le curseur par défaut en définissant le débordement : caché et la largeur sur l'élément d'entrée.
• Remplissez la zone à gauche du pouce avec la couleur d'arrière-plan souhaitée.
• Créez un pouce de curseur personnalisé et positionnez-le à 80 px à droite de la position naturelle du pouce.
• Assurez-vous que le pouce personnalisé est plus grand que la largeur de l'entrée pour couvrir complètement le pouce par défaut.

IE :

• Exploitez le pseudo-élément ::-ms-fill-lower pour définir la couleur d'arrière-plan à gauche du pouce.
• Utilisez ::-ms-fill-upper pour définir la couleur d'arrière-plan à droite du pouce.

Firefox :

• Utilisez le pseudo-élément ::-moz-range-progress pour définir la couleur d'arrière-plan à gauche du pouce.
• Définissez la couleur d'arrière-plan de la piste à l'aide de ::-moz-range-track.

Exemple de code :

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    background-color: #9a905d;
  }

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

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

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

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

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

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

<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!