Generator Checkbox CSS

Yang dilakukan CSS yang dihasilkan

Aturan ini diterapkan langsung ke input dengan appearance: none, yang menghapus tampilan bawaan sehingga kotak bisa ditata:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Saat checkbox tercentang, kotak terisi warna pilihan dan muncul tanda centang putih yang digambar dengan CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Mengapa input asli

Gaya ini tidak pernah mengganti elemen dengan div: <input type="checkbox"> yang asli tetap punya aktivasi keyboard, dukungan pembaca layar, dan pengiriman formulir. appearance: none hanya mengubah tampilannya. Jika perlu mendukung Safari versi lama, tambahkan -webkit-appearance: none pada aturannya.

Fokus dan hover

Aturan yang dihasilkan memuat transisi warna yang halus, tetapi tidak ada gaya hover atau fokus. Tambahkan aturan Anda sendiri untuk :hover dan :focus-visible agar pengguna keyboard selalu melihat posisi fokus, misalnya garis luar berwarna di sekeliling kotak.

Tanda centang

Tanda centang adalah garis putih kecil yang diputar 45 derajat. Jika butuh warna lain atau garis lebih tipis atau lebih tebal, ubah nilai border dan border-width pada aturan ::after.