Bagaimana untuk Membuat Pilihan Dropdown dengan Imej sebagai Pilihan Tanpa JavaScript?

Cara Membuat Pilihan Jatuh Turun dengan Imej sebagai Pilihan

Anda ingin melaksanakan pilih jatuh turun yang menampilkan imej dan bukannya teks untuk pilihannya . Walaupun menggunakan kotak kombo jQuery mungkin merupakan cadangan yang popular, ia mengekalkan teks sebagai pilihan utama dan menggunakan imej hanya sebagai ikon yang disertakan. Keperluan anda, bagaimanapun, adalah untuk mempunyai imej menggantikan mana-mana teks sepenuhnya.

Nasib baik, anda boleh mencapai penyelesaian ini tanpa menggunakan JavaScript. Begini caranya:

Struktur HTML:

<div>
<p>Dalam struktur ini, kami menggunakan butang radio sebagai "pilihan" dalam menu lungsur kami. Label yang dipautkan akan mengaktifkan butang radio apabila anda mengklik padanya, mewujudkan kefungsian senarai lungsur turun.</p>
<p><strong>Penggayaan 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;
}

Penggayaan ini memanipulasi keterlihatan dan gaya elemen, mencipta ilusi pilihan lungsur turun dengan imej sebagai pilihan.

Anda boleh menyesuaikan contoh yang disediakan di http://jsfiddle.net/NDCSR/1/ untuk memenuhi keperluan khusus anda, seperti menetapkan imej latar belakang setiap pilihan secara berbeza menggunakan pemilih label berdasarkan nilai atribut "untuk".