Bagaimana untuk Membuat Pilihan Jatuh Bawah dengan Imej Menggunakan Hanya CSS dan Butang Radio?

Turun Turun Pilih dengan Imej: A Visual Wonderland

Dalam bidang pembangunan web, mempertingkatkan pengalaman pengguna selalunya melibatkan menggabungkan elemen yang menarik secara visual. Satu ciri sedemikian ialah pilihan lungsur turun, yang biasanya memaparkan pilihan teks. Tetapi bagaimana jika anda ingin menggantikan teks dengan imej yang menawan?

Secara tradisinya, penggunaan jQuery combobox telah dicadangkan untuk senario sedemikian. Walau bagaimanapun, penyelesaian ini mempunyai hadnya, kerana ia masih memerlukan teks untuk menambah imej. Untuk menerima sepenuhnya keindahan visual, kami memerlukan pendekatan alternatif.

Kuasa Butang Radio dan CSS

Anehnya, anda tidak memerlukan JavaScript pun untuk mencapai matlamat anda. Dengan memanfaatkan keupayaan penggayaan CSS dan menggunakan perhubungan yang wujud antara butang radio dan label, kami boleh membuat pilihan lungsur turun yang menyepadukan imej dengan lancar.

Begini cara ia berfungsi:

1. Struktur HTML:
   Kami mencipta elemen bekas (<div>) dan mengisinya dengan butang radio () dipautkan ke label individu () menggunakan atribut for.
2. Penggayaan CSS:
   Inti keajaiban terletak pada CSS yang disertakan. Kami secara strategik menggayakan butang radio untuk kekal tersembunyi sambil memberikan label rupa pilihan lungsur turun. Kami menggunakan peralihan kedudukan mutlak dan kelegapan untuk mencapai pengalaman pengguna yang memuaskan apabila meruntuhkan dan mengembangkan lungsur turun.
3. Persatuan Label:
   Label yang dikaitkan dengan butang radio yang diperiksa kekal kelihatan dan legap walaupun dalam keadaan runtuh. Ini membolehkan pengguna melihat pratonton ketebalan garisan yang dipilih.
4. Paparan Imej:
   Menggunakan sifat imej latar belakang, kami boleh menetapkan imej yang berbeza pada setiap label, menggantikan dengan berkesan teks dengan perwakilan visual ketebalan garisan.

Contoh:

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

Teknik ini menyediakan pilihan jatuh turun yang menawan secara visual yang membolehkan pengguna untuk memilih ketebalan garisan secara intuitif menggunakan imej yang menarik secara visual. Ia mempamerkan kuasa CSS dan kepelbagaian butang radio, membuka kemungkinan baharu untuk reka bentuk antara muka pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pilihan Jatuh Bawah dengan Imej Menggunakan Hanya CSS dan Butang Radio?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!