Penjana Checkbox CSS

Pilih gaya checkbox, tetapkan saiz dan warna aksen, dan alat ini menjana CSS untuk menggantikan checkbox pelayar biasa dengan yang bergaya tersuai, yang masih boleh diklik sepenuhnya dan mudah diakses — tiada fon ikon atau imej diperlukan.

Apakah alat ini?

Checkbox lalai pelayar kelihatan berbeza dalam setiap pelayar dan sukar untuk digayakan semula secara terus, kerana rupa terbina dalamnya dilukis oleh sistem operasi berbanding CSS biasa. Jalan penyelesaian standard adalah menyembunyikan checkbox native secara visual dan menggayakan elemen bersebelahan sebaliknya, digerakkan oleh keadaan :checked checkbox tersebut — input kekal berfungsi sepenuhnya dan boleh diakses, hanya rupanya berubah.

Alat ini membina corak tersebut untuk tiga gaya checkbox biasa: kotak bulat dengan tanda semak beranimasi, suis togol gaya iOS yang meluncur, dan gaya bulatan diisi (seperti radio). Klik checkbox dalam pratonton untuk melihat keadaan bertanda, laraskan saiz dan warna aksen, kemudian salin CSS.

Sumber: Selectors Level 4, W3C — spesifikasi yang mentakrifkan pseudo-class :checked yang menjadi asas teknik ini.

Kenapa guna alat ini?

Pratonton langsung, boleh diklik — togol checkbox untuk melihat dengan tepat bagaimana keadaan bertanda dan tidak bertanda kelihatan.
Tiga gaya berbeza yang biasa digunakan dalam satu alat: kotak tanda semak, suis togol, dan bulatan diisi.
Elemen asas kekal sebagai <input type="checkbox"> sebenar, jadi navigasi papan kekunci, penghantaran borang dan pembaca skrin terus berfungsi seperti biasa.
Saiz dan warna aksen boleh dilaraskan, dijana terus ke dalam nilai CSS berbanding ditinggalkan sebagai pemboleh ubah untuk diisi.
Tiada fon ikon, fail SVG atau imej diperlukan — tanda semak dan pemegang dilukis dengan sempadan dan pseudo-elemen CSS biasa.
Percuma, berjalan dalam pelayar anda, tiada pendaftaran.

Cara menggunakannya

Pilih gaya: tanda semak bulat, suis togol, atau bulatan diisi.
Seret pelungsur saiz untuk menskalakan checkbox naik atau turun.
Pilih warna aksen — ini menjadi warna latar belakang dan sempadan keadaan bertanda.
Klik checkbox dalam panel pratonton untuk mengesahkan kedua-dua keadaan bertanda dan tidak bertanda kelihatan betul.
Salin CSS yang dijana ke dalam helaian gaya anda dan gunakannya pada mana-mana <input type="checkbox"> yang dibungkus sama seperti markup pratonton.

Contoh

Input

Gaya: tanda semak bulat · Saiz: 24px · Warna: oren

Hasil

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Input checkbox disembunyikan secara visual; kotak yang kelihatan adalah <span> bersebelahan yang digayakan dengan keadaan :checked input tersebut, dengan sempadan berputar kecil dilukis sebagai tanda semak apabila bertanda.

Kenapa sembunyikan checkbox native berbanding membuangnya

Menggoda untuk melangkau <input> sebenar dan membina checkbox semata-mata daripada <div> yang digayakan dengan pengendali klik, tetapi itu hilang sokongan papan kekunci, penghantaran borang, dan semantik pembaca skrin secara percuma. Corak yang dijana alat ini mengekalkan input checkbox sebenar dalam markup — hanya disembunyikan secara visual dengan opacity: 0 dan diletakkan semula — supaya pelayar terus menganggapnya sebagai checkbox sebenar dalam setiap perkara yang penting, manakala elemen bersebelahan mengendalikan penggayaan yang kelihatan.

Tiga gaya secara ringkas

Tanda semak bulat: corak segi empat-dengan-tanda-semak yang biasa, paling lazim untuk medan borang, checkbox persetujuan dan senarai pilihan-berganda.
Suis togol: terbaca sebagai tetapan on/off segera berbanding medan borang — terbaik untuk keutamaan dan skrin tetapan berbanding senarai checkbox.
Bulatan diisi: rupa minimal seperti butang radio, berguna apabila kotak segi empat terasa berat secara visual berbanding elemen UI bulat berdekatan.

Menyepadankannya dengan seluruh UI anda

Warna aksen yang dijana hanya mempengaruhi keadaan bertanda — pilih apa jua warna jenama atau butang anda supaya checkbox terasa konsisten dengan seluruh halaman. Gandingkan dengan border-radius yang sama digunakan di tempat lain dalam antara muka untuk rupa yang lebih padu.

→ Penjana CSS Border-Radius · Pemilih Warna

Soalan lazim

Adakah checkbox bergaya itu masih boleh diakses?

Ya — elemen asas adalah <input type="checkbox"> sebenar, hanya disembunyikan secara visual berbanding dibuang. Ia terus menerima fokus, bertindak balas kepada input papan kekunci (space untuk togol), dan diumumkan dengan betul oleh pembaca skrin, kerana teknologi bantuan membaca elemen input, bukan span bergaya di sebelahnya.

Kenapa CSS menggunakan pemilih bersebelahan seperti input:checked + .mark?

Kerana kotak yang kelihatan adalah elemen berasingan daripada input checkbox sebenar, CSS memerlukan cara untuk menggayakan elemen bersebelahan itu berdasarkan keadaan input. Kombinator + memilih elemen sejurus selepas input yang bertanda, iaitu teknik standard untuk membina gaya checkbox dan radio tersuai tanpa JavaScript.

Bolehkah saya guna ini pada borang sebenar, bukan sekadar demo?

Ya — salin CSS yang dijana dan bungkus input checkbox borang sebenar dalam struktur markup yang sama ditunjukkan dalam HTML/pratonton. Kerana ia tetap checkbox native, ia dihantar bersama borang tepat seperti yang tidak bergaya, dan berfungsi dengan logik pengesahan borang sedia ada.

Kenapa tanda semak beranimasi pada gaya bulat?

Animasi scale-in yang pendek pada tanda semak menjadikan keadaan bertanda terasa lebih sengaja dan responsif berbanding muncul/hilang serta-merta, iaitu corak biasa dalam checkbox UI yang mantap. Ia peraturan keyframes CSS kecil yang disertakan bersama kod yang dijana.

Adakah gaya suis-togol memerlukan HTML berbeza?

Tidak — ketiga-tiga gaya menggunakan markup asas yang sama (input checkbox tersembunyi ditambah elemen bersebelahan untuk bentuk yang kelihatan). Menukar gaya dalam alat ini hanya mengubah peraturan CSS yang digunakan pada struktur yang sama itu, jadi anda boleh menukar gaya kemudian tanpa menyentuh HTML anda.