10 Cuplikan Kotak Pilih CSS & JavaScript Gratis

Kotak pilih HTML default telah melayani kami dengan baik selama beberapa dekade. Tapi di era modern, bisa dibilang mereka agak… basi.

Desainer dapat melakukan lebih baik dan berkat kemajuan dalam CSS, mudah untuk menyesuaikan kotak pilihan. Belum lagi semua kode sumber terbuka tersedia secara online secara gratis.

Saya telah mengumpulkan koleksi 10 pilihan teratas saya untuk gaya kotak pilih buatan tangan. Ini tidak dirilis sebagai plugin tetapi mengandalkan template untuk kustomisasi JavaScript dan CSS. Tapi semuanya mudah diatur dan bahkan ditata ulang untuk tujuan Anda sendiri.

1. Menu Pilih Kustom

Memulai koleksi adalah gaya menu pilihan khusus Wallace Erick.

Ini menggunakan CSS untuk restyling dan JavaScript untuk mengonfigurasi UX menu. Mereka berperilaku sedikit berbeda dari pilihan HTML standar, dan saya pikir mereka sedikit lebih baik untuk digunakan.

Anda dapat memilih ukuran dan gaya warna menu atau bekerja dengan default Wallace. Yang terbaik dari semuanya, ia menyertakan desain bidang unggahan khusus yang, jika Anda pernah mencoba menata ulang, Anda akan tahu itu sulit.

Tempat yang sangat baik untuk memulai jika Anda hanya ingin menu pilihan yang bersih namun tampak segar yang berfungsi.

2. Pilihan Sederhana

Berikut kotak pilih yang sangat sederhana lainnya yang bertujuan untuk berbaur lebih alami ke dalam setiap tata letak.

Ini bergantung pada warna yang lebih halus dengan skema warna hitam & putih polos. Tetapi juga menggunakan JavaScript untuk menganimasikan menu pilih masuk dan keluar dari tampilan.

Ini bekerja dengan menargetkan bidang input tersembunyi yang berperilaku seperti bidang pilih. Dengan cara ini Anda masih dapat menarik data dari frontend ke formulir Anda, karena solusi ini secara teknis tidak menggunakan elemen <select> yang sebenarnya.

Jika kompatibilitas menjadi perhatian, lewati yang ini. Tapi saya harus mengakui desainnya cantik dan akan sempurna untuk lalu lintas desktop.

3. Dropdown HTML Non-Sucky

Seperti namanya, paket menu pilihan ini bertujuan agar tidak payah. Semuanya memiliki gaya dan ukuran yang bervariasi dengan tombol yang dapat Anda klik untuk mengubah warna sesuai permintaan.

Jelas Anda dapat menghapus fitur itu di tata letak Anda sendiri dan tetap berpegang pada satu skema yang berfungsi untuk situs Anda. Namun secara keseluruhan, menu pilihan ini berfungsi seperti menu biasa, dan sangat bagus untuk digunakan.

Jika Anda khawatir tentang kompatibilitas maka pertimbangkan untuk bekerja dengan template ini.

Sebagian besar perubahan bersifat kosmetik sehingga seharusnya tidak terlalu memengaruhi perilaku pengguna.

4. Pilihan Placeholder

Desain sebenarnya dari menu pilih placeholder ini sangat cantik, tetapi desain bukanlah satu-satunya faktor di sini.

Pengembang James Nowland membuat menu ini dengan tujuan menghapus default dari pilihan pilihan. Ini berarti ia berperilaku lebih seperti tempat penampung di bidang teks tempat Anda melihatnya saat bidang kosong, tetapi setelah Anda menetapkan nilai, nilai itu menghilang.

Ini sepenuhnya sesuai dan berfungsi dengan elemen pilih HTML yang sebenarnya. Bidang opsi disembunyikan secara default setiap kali pengguna memilih pilihan. Dengan cara ini Anda tidak akan pernah melihat teks "pilih opsi" di mana pun di menu tarik-turun. Solusi yang benar-benar kreatif!

5. Desain Datar

Estetika sering kali penting dalam desain web dan menu pilih datar ini adalah contoh yang bagus.

Ini masih berfungsi seperti pilihan biasa dan bagian dropdown belum diubah sama sekali. Tetapi hanya penataan ulang dari pemilihan itu sendiri yang menghidupkan halaman. Rasanya jauh lebih berkelas daripada default browser jelek.

Anda bahkan dapat mengambil template ini dan mengembangkannya dengan gaya datar Anda sendiri yang diterapkan ke area dropdown. Benar-benar panggilan Anda!

Tetapi sebagai template awal, ini adalah salah satu pilihan paling sederhana untuk antarmuka apa pun.

6. CSS murni

Saya penggemar berat CSS murni daripada JavaScript karena menyederhanakan seluruh proses desain. Ini tidak mudah tetapi ada begitu banyak solusi di luar sana.

Salah satu favorit saya adalah cuplikan ini yang tidak hanya menampilkan menu pilih CSS murni, tetapi juga radio dan kotak centang.

Semuanya terlihat fenomenal dan harus menyatu dengan semua jenis tata letak. Anda memiliki kontrol penuh untuk melakukan pengeditan di CSS dan yang terbaik dari semua ini harus bekerja di semua browser utama juga.

7. Dropdown yang Dapat Diakses dengan Gaya

Berikut adalah salah satu contoh yang lebih bergaya tentang apa yang dapat Anda lakukan dengan menu tertentu. Cuplikan yang dibuat oleh Andy Fitzsimon ini mengandalkan JavaScript untuk efek dropdown dan menggunakan CSS khusus untuk gradien dan ikon panah.

Hebatnya lagi, menu ini juga mendukung fitur no-JS sehingga tetap bisa dijalankan meski JavaScript dinonaktifkan. Ini disebut degradasi anggun dan ini adalah teman terbaik pengembang web untuk aksesibilitas.

Menu pilihan ini tetap menjalankan gradien web 2.0 sekolah lama yang mungkin tidak sesuai dengan desain untuk 2017 dan seterusnya.

Tapi ini menunjukkan Anda dapat mengambil menu pilih di mana saja Anda inginkan dengan sedikit kreativitas. Dan ini dapat bekerja dengan sangat baik jika Anda meretas CSS untuk menyesuaikannya sedikit.

8. Menu Ikon SVG

Menu pilih default memiliki ikon panah ke samping dan tidak banyak lagi. Dengan sedikit keajaiban SVG, Anda dapat mengubah ini menjadi ikon lain yang Anda inginkan.

Menu kustom ini memiliki desain ikon plus sendiri yang berjalan dengan file SVG murni. Saat Anda mengklik untuk memperluas menu, itu akan bernyawa menjadi ikon X untuk menutup/menyembunyikan.

Saya belum pernah melihat yang seperti ini sebelumnya dan ini menunjukkan seberapa jauh kami telah melampaui batas browser web.

Sayangnya ini tidak berjalan pada elemen pemilihan HTML asli. Ini adalah kumpulan item daftar di dalam div sehingga perlu menargetkan bidang input tersembunyi setiap kali nilai dipilih.

Untungnya proses itu sangat mudah jadi jika Anda menginginkan desain ini di situs Anda, tidak perlu banyak usaha untuk mewujudkannya.

9. Pilih Kotak Eksperimen

Inilah desain eksperimental yang benar-benar menarik perhatian saya. Layar demo perbandingan menunjukkan betapa berbedanya ini dengan menu pilihan biasa dan bagaimana hal itu mengubah pengalaman pengguna.

Saat Anda pertama kali mengetuk/mengklik untuk membuka menu, menu itu akan meluncur ke bawah dengan efek animasi penuh. Tapi itu tidak akan disembunyikan kecuali Anda mengklik menu itu lagi, tidak seperti menu pilihan biasa yang bersembunyi saat Anda mengklik di tempat lain di halaman.

Contoh desain bersih yang sangat bagus dengan animasi sederhana. Tetapi jika Anda tidak menyukai fitur klik-untuk-sembunyikan yang hilang, yang satu ini mungkin menjadi pemecah kesepakatan.

10. Pilihan Gelap & Terang

Jika Anda juga menyukai CSS murni dan ingin pilihan yang ramping, lihat solusi ini dan coba gunakan salah satunya sebagai template awal.

Keduanya mengandalkan gradien CSS untuk latar belakang dan memadukan menu tarik-turun ke dalam warna gradien yang lebih rendah. Ini tidak menggunakan plugin JavaScript apa pun sehingga Anda dapat melakukannya hanya dengan sedikit CSS dan beberapa upaya kreatif.

Perhatikan bahwa CSS itu sendiri cukup rumit, jadi ada baiknya jika Anda mengetahui bahasanya. Tetapi sebagai titik awal, ini adalah salah satu pilihan terbaik yang akan Anda temukan, dan ini juga menyisakan banyak ruang untuk penyesuaian.