Comment créer une sélection déroulante avec des images en utilisant uniquement CSS et des boutons radio ?

Sélection déroulante avec images : un pays des merveilles visuel

Dans le domaine du développement Web, l'amélioration de l'expérience utilisateur implique souvent l'incorporation d'éléments visuellement attrayants. L'une de ces fonctionnalités est la sélection déroulante, qui affiche généralement les options de texte. Mais que se passe-t-il si vous souhaitez remplacer le texte par des images captivantes ?

Traditionnellement, l'utilisation de la combobox jQuery a été proposée pour de tels scénarios. Cependant, cette solution a ses limites, car elle nécessite toujours du texte pour compléter les images. Pour profiter pleinement de la beauté des visuels, nous avons besoin d'une approche alternative.

La puissance des boutons radio et du CSS

Étonnamment, vous n'avez même pas besoin de JavaScript pour atteindre votre objectif. En exploitant les capacités de style de CSS et en utilisant la relation inhérente entre les boutons radio et les étiquettes, nous pouvons créer une sélection déroulante qui intègre de manière transparente les images.

Voici comment cela fonctionne :

1. Structure HTML :
   Nous créons un élément conteneur (<div>) et le remplissons avec des boutons radio () lié à des étiquettes individuelles () à l'aide de l'attribut for.
2. Style CSS :
   Le nœud de la magie réside dans l'accompagnement CSS. Nous stylisons stratégiquement les boutons radio pour qu'ils restent cachés tout en donnant aux étiquettes l'apparence d'options déroulantes. Nous utilisons des transitions de positionnement et d'opacité absolues pour obtenir une expérience utilisateur satisfaisante lors de la réduction et de l'expansion de la liste déroulante.
3. Association d'étiquettes :
   Les étiquettes associées aux boutons radio cochés restent visibles et opaques. même à l'état effondré. Cela permet à l'utilisateur de voir un aperçu de l'épaisseur de ligne sélectionnée.
4. Affichage de l'image :
   En utilisant la propriété background-image, nous pouvons attribuer des images distinctes à chaque étiquette, remplaçant ainsi efficacement texte avec représentations visuelles de la ligne épaisseurs.

Exemple :

<div>

#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;
}
#image-dropdown:hover {
    height: 200px;
    overflow-y: scroll;
    transition: height 0.5s;
}

#image-dropdown label {
    display: none;
    margin: 2px;
    height: 46px;
    opacity: 0.2;
    background: url("image1.png") 50% 50%;
}
#image-dropdown:hover label {
    display: block;
}
#image-dropdown input:checked + label {
    opacity: 1 !important;
    display: block;
}

Cette technique fournit une sélection déroulante visuellement captivante qui permet aux utilisateurs de choisir intuitivement les épaisseurs de trait en utilisant des options visuellement attrayantes. images. Il met en valeur la puissance du CSS et la polyvalence des boutons radio, ouvrant de nouvelles possibilités pour la conception de l'interface utilisateur.

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!