Comment puis-je personnaliser le type d'entrée de la plage HTML5 pour qu'il ressemble à une barre de progression ?

Personnalisation du type de plage d'entrée HTML5 avec CSS

Le type d'entrée de plage HTML5 est un élément utile pour permettre aux utilisateurs de sélectionner une valeur dans une plage spécifiée gamme. Cependant, son apparence par défaut peut ne pas toujours correspondre à l’apparence souhaitée de votre application Web. Dans cet article, nous explorerons comment personnaliser l'esthétique du type d'entrée de plage pour améliorer l'expérience utilisateur.

Votre question tourne autour de la modification du type d'entrée de plage pour qu'il ressemble à une barre de progression. Tenter d'appliquer des attributs CSS standard peut s'avérer inefficace en raison du comportement spécifique du navigateur.

Pour personnaliser avec succès le type d'entrée de plage, nous devons exploiter des propriétés CSS spécifiques qui remplacent l'apparence par défaut. Voici un exemple :

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

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

Le CSS ci-dessus modifiera les aspects suivants du type d'entrée de plage :

• Couleur d'arrière-plan : La couleur d'arrière-plan du l'indicateur de portée est changé en rouge.
• Hauteur : La hauteur de l'indicateur de portée est réduite à 7 px.
• Pouce du curseur : L'apparence de le pouce du curseur est personnalisé pour être un cercle bleu de 10 px sur 10 px.

En utilisant des pseudo-classes spécifiques au navigateur comme ::-webkit-slider-thumb, nous pouvons cibler des éléments spécifiques de l'entrée de plage tapez et personnalisez davantage leur apparence. Cette approche vous permet d'obtenir une apparence de barre de progression ou toute autre esthétique souhaitée.

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!