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

Styler l'entrée de plage HTML5 avec différentes couleurs de chaque côté

Styler les entrées de plage HTML5 pour avoir des couleurs contrastées sur les côtés gauche et droit est un demande commune. Lorsque l'utilisateur interagit avec le curseur, la couleur change de manière dynamique, donnant un retour visuel sur la valeur d'entrée. Obtenir cet effet en CSS pur peut sembler un défi, mais c'est possible.

Pour Chrome, l'astuce consiste à masquer le débordement de l'entrée et à utiliser une ombre de boîte pour remplir le reste. espace avec la couleur désirée. Cette technique peint efficacement le côté gauche du curseur avec une couleur personnalisée.

Pour IE et Firefox, nous pouvons exploiter les pseudo-éléments CSS intégrés :

• Dans IE : ::-ms-fill-lower vous permet de styliser la partie inférieure du curseur, activant le vert color.
• Dans Firefox : ::-moz-range-progress vous offre un contrôle similaire, vous permettant de définir la couleur de la partie remplie du curseur.

Pour illustrer la solution CSS, référez-vous au code suivant :

@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;
  }
}

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;
}

A l'aide de ce code CSS, vous pouvez styliser votre HTML5 entrée de plage pour afficher différentes couleurs de chaque côté du curseur, créant ainsi une interface visuellement attrayante et conviviale pour votre application Web.

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!