Comment transformer une entrée de plage HTML5 standard en une barre de progression personnalisée à l'aide de CSS ?

Personnalisation de l'entrée de plage HTML5 avec CSS

Le type d'entrée de plage HTML5 offre un moyen polyvalent de saisie utilisateur, mais son apparence par défaut peut ne pas toujours aligné avec l’esthétique souhaitée. Cet article explore les techniques spécifiques requises pour adapter sa présentation dans une conception de type barre de progression à l'aide de CSS.

Malgré les tentatives de modification de son apparence à l'aide d'attributs CSS conventionnels, de tels efforts peuvent s'avérer inefficaces. Pour surmonter cet obstacle, il est essentiel de remplacer le style par défaut appliqué par les navigateurs Web. Ceci peut être réalisé en définissant explicitement la propriété -webkit-apparence sur none pour l'entrée de plage elle-même et son composant pouce.

Personnalisation de l'entrée de plage :

Pour modifiez l'apparence de l'entrée de plage, appliquez les règles CSS suivantes :

<code class="css">input[type='range'] {
  -webkit-appearance: none !important;
  background: red;
  height: 7px;
}</code>

Ce code définit la couleur de fond sur rouge et ajuste la hauteur à 7 pixels, lui donnant l'illusion d'une barre de progression.

Personnalisation du pouce de plage :

Ensuite, pour personnaliser le pouce de plage, utilisez les règles CSS suivantes :

<code class="css">input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: blue;
  height: 10px;
  width: 10px;
}</code>

Ces styles spécifient un fond bleu , définissez la hauteur et la largeur sur 10 pixels et assurez-vous que le pouce a une apparence qui correspond au reste de la barre de progression.

En appliquant ces règles CSS, vous pouvez réussir à transformer l'entrée de plage standard en une progression sur mesure. élément d'interface utilisateur en forme de barre, améliorant son attrait esthétique et l'alignant sur des exigences de conception spécifiques.

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!