Generator Checkbox CSS

Apa Itu Alat Ini?

Checkbox bawaan browser terlihat berbeda di setiap browser dan sulit diberi gaya ulang secara langsung, karena tampilan bawaannya digambar oleh sistem operasi, bukan CSS biasa. Solusi standarnya adalah menyembunyikan checkbox asli secara visual dan memberi gaya pada elemen saudara sebagai gantinya, dikendalikan oleh status :checked checkbox — input tetap sepenuhnya fungsional dan aksesibel, hanya tampilannya yang berubah.

Alat ini membangun pola tersebut untuk tiga gaya checkbox umum: kotak membulat dengan tanda centang beranimasi, sakelar geser bergaya iOS, dan gaya lingkaran terisi (mirip radio button). Klik checkbox di pratinjau untuk melihat status tercentang, sesuaikan ukuran dan warna aksen, lalu salin CSS-nya.

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

Mengapa Menggunakannya?

• Pratinjau langsung dan bisa diklik — alihkan checkbox untuk melihat persis bagaimana tampilan status tercentang dan tidak tercentang.
• Tiga gaya berbeda yang umum digunakan dalam satu alat: kotak bertanda centang, sakelar geser, dan lingkaran terisi.
• Elemen dasarnya tetap <input type="checkbox"> yang sungguhan, sehingga navigasi keyboard, pengiriman formulir, dan pembaca layar tetap berfungsi normal.
• Ukuran dan warna aksen dapat disesuaikan, dihasilkan langsung ke dalam nilai CSS, bukan dibiarkan sebagai variabel yang harus diisi sendiri.
• Tidak perlu font ikon, file SVG, atau gambar — tanda centang dan tombol digambar dengan border CSS biasa dan pseudo-elemen.
• Gratis, berjalan di browser Anda, tanpa pendaftaran.

Cara Menggunakan

1. Pilih gaya: centang membulat, sakelar geser, atau lingkaran terisi.
2. Geser penggeser ukuran untuk memperbesar atau memperkecil checkbox.
3. Pilih warna aksen — ini menjadi warna latar dan border pada status tercentang.
4. Klik checkbox di panel pratinjau untuk memastikan status tercentang maupun tidak tercentang sama-sama terlihat baik.
5. Salin CSS yang dihasilkan ke stylesheet Anda dan gunakan pada <input type="checkbox"> mana pun yang dibungkus dengan struktur yang sama seperti markup pratinjau.

Contoh

Input

Gaya: centang membulat · Ukuran: 24px · Warna: oranye

Output

.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 terlihat adalah <span> saudara yang diberi gaya berdasarkan status :checked input, dengan border kecil yang diputar digambar sebagai tanda centang saat dicentang.

Mengapa menyembunyikan checkbox asli, bukan menghapusnya

Ada godaan untuk melewatkan <input> asli dan membangun checkbox hanya dari <div> bergaya dengan handler klik, tapi itu berarti kehilangan dukungan keyboard, pengiriman formulir, dan semantik pembaca layar secara cuma-cuma. Pola yang dihasilkan alat ini tetap mempertahankan input checkbox asli dalam markup — hanya disembunyikan secara visual dengan opacity: 0 dan diposisikan ulang — sehingga browser tetap memperlakukannya sebagai checkbox sungguhan dalam segala hal yang penting, sementara elemen saudara menangani gaya yang terlihat.

Ketiga gaya secara sekilas

• Centang membulat: pola kotak-dengan-centang yang familiar, paling umum untuk kolom formulir, checkbox persetujuan syarat, dan daftar pilihan ganda.
• Sakelar geser: terasa seperti pengaturan hidup/mati instan daripada kolom formulir — lebih cocok untuk layar preferensi daripada daftar checkbox.
• Lingkaran terisi: tampilan minimalis mirip radio button, berguna saat kotak persegi terasa terlalu berat secara visual di samping elemen UI membulat di sekitarnya.

Menyesuaikannya dengan UI Anda yang lain

Warna aksen yang dihasilkan hanya memengaruhi status tercentang — pilih warna sesuai merek atau tombol Anda agar checkbox terasa konsisten dengan sisa halaman. Padukan dengan border-radius yang sama seperti yang digunakan di tempat lain pada antarmuka untuk tampilan yang lebih menyatu.

→ Generator Border Radius · Color Picker

Pertanyaan yang Sering Diajukan