Wie erstelle ich eine Dropdown-Auswahl mit Bildern als Optionen ohne JavaScript?

So erstellen Sie eine Dropdown-Auswahl mit Bildern als Optionen

Sie möchten eine Dropdown-Auswahl implementieren, deren Optionen Bilder anstelle von Text enthalten . Auch wenn die Verwendung der jQuery-Kombinationsbox ein beliebter Vorschlag ist, behält sie Text als primäre Option bei und verwendet Bilder nur als begleitende Symbole. Ihre Anforderung besteht jedoch darin, dass Bilder jeglichen Text vollständig ersetzen.

Glücklicherweise können Sie diese Lösung erreichen, ohne JavaScript zu verwenden. So geht's:

HTML-Struktur:

<div>
<p>In dieser Struktur verwenden wir Optionsfelder als „Optionen“ in unserem Dropdown. Die verknüpften Beschriftungen aktivieren das Optionsfeld, wenn Sie darauf klicken, wodurch die Funktionalität einer Dropdown-Liste entsteht.</p>
<p><strong>CSS-Styling:</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;
}

Dieses Styling manipuliert die Sichtbarkeit und Stil der Elemente, wodurch die Illusion einer Dropdown-Auswahl mit Bildern als Optionen entsteht.

Sie können das unter http://jsfiddle.net/NDCSR/1/ bereitgestellte Beispiel an Ihre spezifischen Bedürfnisse anpassen. Beispielsweise können Sie die Hintergrundbilder jeder Option mithilfe von Beschriftungsselektoren basierend auf den „for“-Attributwerten unterschiedlich festlegen.