Comment créer une sélection déroulante avec des images comme options sans JavaScript ?

Comment créer une sélection déroulante avec des images comme options

Vous souhaitez implémenter une sélection déroulante qui comporte des images au lieu de texte pour ses options . Bien que l'utilisation de la liste déroulante jQuery puisse être une suggestion populaire, elle conserve le texte comme option principale et utilise les images uniquement comme icônes d'accompagnement. Votre exigence, cependant, est que les images remplacent complètement n'importe quel texte.

Heureusement, vous pouvez obtenir cette solution sans même utiliser JavaScript. Voici comment :

Structure HTML :

<div>
<p>Dans cette structure, nous utilisons des boutons radio comme « options » dans notre liste déroulante. Les étiquettes liées activeront le bouton radio lorsque vous cliquerez dessus, créant ainsi la fonctionnalité d'une liste déroulante.</p>
<p><strong>Style CSS :</strong></p>
<pre class="brush:php;toolbar:false">/* Style the overall dropdown box */
#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;  /* Hide when collapsed */
}
/* Style the dropdown when expanded */
#image-dropdown:hover {
    height: 200px;
    overflow-y: scroll;  /* Allow scrolling */
    transition: height 0.5s;
}
/* Hide the radio button visuals */
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* Style the dropdown options */
#image-dropdown label {
    display: none;
    margin: 2px;
    height: 46px;
    opacity: 0.2;
    background: url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;
}
#image-dropdown:hover label {
    display: block;  /* Show all options when expanded */
}
/* Show the option related to the selected radio button */
#image-dropdown input:checked + label {
    opacity: 1 !important;
    display: block;
}

Ce style manipule le visibilité et style des éléments, créant l'illusion d'une sélection déroulante avec des images comme options.

Vous pouvez personnaliser l'exemple fourni sur http://jsfiddle.net/NDCSR/1/ pour l'adapter à vos besoins spécifiques, comme définir différemment les images d'arrière-plan de chaque option à l'aide de sélecteurs d'étiquettes basés sur les valeurs de l'attribut "pour".