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

Personnalisation de l'apparence du type d'entrée de plage HTML5

Le type d'entrée de plage HTML5 offre un moyen pratique de rassembler les entrées de l'utilisateur dans une plage spécifiée. Par défaut, les navigateurs affichent les entrées de plage avec leur style natif, qui peut ne pas toujours correspondre à la conception d'interface utilisateur souhaitée. Dans cet article, nous explorerons comment personnaliser l'apparence du type d'entrée de plage à l'aide de CSS pour obtenir une esthétique semblable à une barre de progression.

Énoncé du problème :

" Je souhaite modifier l'apparence du type d'entrée de plage HTML5 pour qu'il ressemble à une barre de progression, mais l'application d'attributs CSS avec une classe CSS ne semble avoir aucun effet."

Solution :

Pour personnaliser l'apparence du type d'entrée de plage :

1. Supprimer le style natif : Utilisez la propriété CSS -webkit-apparence: none !important pour remplacer la valeur par défaut du navigateur style. Cela garantit que tous les styles personnalisés que vous appliquez seront prioritaires.
2. Configurer l'arrière-plan : Définissez la propriété d'arrière-plan pour personnaliser la couleur d'arrière-plan et la hauteur de la piste d'entrée de la plage.
3. Personnaliser le pouce : Modifiez l'apparence du pouce (la poignée) en définissant les propriétés d'arrière-plan, de hauteur et de largeur du pseudo-élément -webkit-slider-thumb.

Code CSS :

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

En appliquant ce code CSS, vous pouvez transformer le type d'entrée de plage standard en une barre de progression de style personnalisé, complétée par une piste et une poignée colorées.

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!