8 Cuplikan CSS untuk Styling Kotak Centang & Tombol Radio HTML

8 Cuplikan CSS untuk Styling Kotak Centang & Tombol Radio HTML

Elemen bentuk HTML seperti kotak centang dan tombol radio adalah pokok dari web. Tetapi selama bertahun-tahun, desainer web tidak melakukan banyak hal untuk menyempurnakannya. Itu telah berubah sedikit dalam beberapa waktu terakhir.

Berkat kekuatan CSS (dan kadang-kadang sedikit JavaScript), elemen-elemen ini digunakan untuk beberapa penggunaan kreatif yang serius. Dalam beberapa kasus, mereka didandani hingga tidak dapat dikenali. Akhirnya, utilitas luar biasa mereka sekarang terlihat cocok.

Untuk mendemonstrasikan kemampuan kotak centang dan tombol radio, kami telah menemukan delapan cuplikan CSS unik. Sementara beberapa berpegang pada peran berbasis bentuk tradisional, yang lain digunakan untuk menciptakan pengalaman visual yang sama sekali berbeda.

Mari kita periksa apa yang mampu dilakukan oleh elemen-elemen yang sebelumnya biasa-biasa saja ini. Hasilnya mungkin mengejutkan Anda!

Tombol Radio Literal oleh Jon Kantner

Apa cara yang lebih baik untuk menunjukkan apa yang dapat dilakukan CSS untuk tombol radio yang mulia selain meniru radio kuno? Tombol-tombol manis ini akan terlihat familier bagi siapa saja yang memiliki boombox atau hi-fi di masa lalu. Dan ya, mengklik salah satu akan menghasilkan efek “didorong” yang menyenangkan.

Lihat Pena Tombol Radio Literal oleh Jon Kantner

Grup Kotak Centang Bergaya sebagai Ubin oleh Håvard Brynjulfsen

Inilah bukti bahwa kotak centang tidak perlu membosankan. Dengan mengubahnya menjadi ubin yang dapat diklik, cuplikan ini membuat UI yang indah dan modern. Tidak hanya tampak hebat; itu juga menyediakan konteks. Elemen mempertahankan kegunaan, bahkan setelah perubahan gaya yang signifikan.

Lihat Pena Grup kotak centang ditata sebagai ubin oleh Håvard Brynjulfsen

Matikan Agresif oleh Yeshua Emanuel Braz

Beralih telah menjadi penggunaan populer untuk kotak centang. Dan sementara kami memiliki seluruh koleksi yang didedikasikan untuk mereka, mereka selalu layak untuk ditinjau kembali. Contoh menyenangkan ini terlihat cukup sederhana – sampai Anda mengaktifkan sakelar. Animasi CSS memberi kekuatan pada efek “benjolan” yang berwarna-warni, tanpa meninggalkan keraguan tentang interaksi pengguna.

Lihat Pena Tantangan Codepen: Bump – Toggle Agresif oleh Yeshua Emanuel Braz

Kapal Penyapu Tambang CSS Murni oleh Bali Balo

Jika Anda pernah berpikir untuk mengambil elemen formulir jauh di luar kebiasaan, cuplikan ini cocok untuk Anda. Kumpulan kotak centang telah diubah menjadi Minesweeper versi browser – game Windows klasik. Dalam hal ini, semuanya dijalankan oleh HTML dan CSS.

Lihat Pena Kapal penyapu ranjau CSS murni oleh Bali Balo

Kotak Centang & Radio CSS Murni dalam Gelap & Terang oleh Ivan Grozdic

Cuplikan ini menawarkan pilihan lengkap (lihat apa yang kami lakukan di sana?) dari elemen radio dan kotak centang yang didandani. Tidak hanya itu, Anda juga akan menemukannya ditata untuk mode kontras warna terang dan gelap. Hampir semua item ini dapat dengan mudah disalahartikan sebagai tombol HTML.

Lihat Pena Kotak centang dan radio (gelap/terang) – css murni – #06 oleh Ivan Grozdic

Animasi Riak pada Radio Jenis Input & Kotak Centang oleh Wilder Taype

Tidak ada salahnya menggunakan tombol radio dan kotak centang dengan tampilan yang lebih tradisional. Dan fakta bahwa Anda dapat menyempurnakannya dengan CSS, seperti yang ditunjukkan di sini, berarti Anda tidak harus puas dengan defaultnya. Contoh-contoh ini tidak hanya menarik, tetapi juga menampilkan animasi yang apik saat diklik.

Lihat Pena Animasi riak pada radio tipe input dan Kotak Centang oleh WILDER TAYPE

Pengukur Kemajuan Tugas oleh Clint Brown

Desain yang cerdas dan beberapa JavaScript yang membantu telah mengubah rangkaian kotak centang ini menjadi daftar tugas yang interaktif. Periksa setiap tugas dari daftar Anda dan lihat itu dikonfirmasi di layar. Perlu mundur selangkah? Hapus centang tugas untuk memulai dari awal. Ini adalah contoh yang bagus tentang jenis fleksibilitas yang Anda peroleh dengan menggunakan elemen HTML asli. Tidak perlu membangun UI khusus dari awal.

Lihat Pena Pengukur Kemajuan Tugas oleh Clint Brown

Tombol Pemilih Radio SVG CSS Murni oleh Nikki Pantony

Menambahkan SVG ke dalam mix berarti tombol radio ini dapat diskalakan ke berbagai ukuran. Presentasinya sangat tajam dan membuat desain yang menarik. Ini adalah estetika yang tidak bisa ditandingi oleh bentuk standar.

Lihat Pena CSS Murni – Tombol Pemilih Radio SVG oleh Nikki Pantony

Membuat Elemen Formulir yang Lebih Canggih

Ada sesuatu yang bisa dikatakan untuk kesederhanaan tombol radio HTML dan kotak centang. Selama bertahun-tahun, mereka telah melakukan pekerjaan mereka dengan cukup baik – dan tanpa banyak pujian.

Tetapi desainer web sekarang membawa elemen-elemen ini ke abad ke-21. Kemampuan untuk mengubah penampilan mereka dengan CSS telah menghasilkan beberapa solusi yang sangat kreatif. Cuplikan dalam ringkasan ini adalah contoh utama dari apa yang mungkin.

Jika Anda mencari lebih banyak ide untuk menginspirasi Anda, lihat kami Koleksi CodePen!

Post Comment