Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Jalur tugas / dari masukan ke hasil

Atur ukuran kontrol

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Checkbox CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara mendesain kotak centang CSS kustom

  1. 01

    Atur ukuran kontrol

    Tanda centang mengikuti ruang di dalam border, bukan ukuran luarnya. Pratinjau dan ekspor memakai bentuk border CSS yang sama. Klik pratinjau atau fokuskan lalu tekan Spasi untuk mengganti status centang bawaan.

  2. 02

    Bentuk bingkainya

    Gunakan kontrol 18–64 px dan border 1–8 px. Sisakan minimal 8 px di dalam border untuk tanda centang. Kombinasi tidak valid mengosongkan pratinjau dan menonaktifkan ekspor.

  3. 03

    Pilih warna setiap status

    Pilih Warna tepi untuk garis luar saat diam dan Warna saat tercentang untuk status terisi. Jaga Warna saat tercentang cukup gelap untuk kontras dengan tanda putih di depannya, karena tandanya selalu putih.

  4. 04

    Pratinjau kedua status

    Alihkan Tampilkan status tercentang untuk membandingkan sisi diam dan terisi di pratinjau langsung. Tanda masuk dengan transisi 160 ms dan sedikit pembesaran — persis gerakan yang direproduksi CSS ekspor di antara kedua status.

  5. 05

    Salin atau unduh CSS

    Tekan Salin CSS atau Unduh .css untuk menyimpan toolars-checkbox.css. Ruleset ini mempertahankan input asli — appearance: none hanya mengecat ulang — dan status :focus-visible serta :disabled sudah disertakan dalam ekspor.

  6. 06

    Pertahankan markup native

    Terapkan kelas .checkbox langsung ke elemen input asli dan pasangkan dengan label seperti kotak centang mana pun. Fokus keyboard, perilaku klik, dan pengumuman teknologi bantu tetap bekerja karena tidak ada hal semantik yang digantikan. Latar putih saat diam adalah bagian dari aturan, jadi status kosong tetap terbaca di permukaan berwarna.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Checkbox CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Checkbox CSS

Halaman pengaturan yang penuh kotak centang bawaan terlihat belum selesai, dan sistem desain membutuhkan kontrol yang sama di setiap formulir tanpa menarik dependensi JavaScript. Karena CSS yang diekspor mempertahankan elemen input asli, fokus keyboard dan pengumuman pembaca layar tetap bekerja — sementara warna merek yang sedang dicoba tidak pernah meninggalkan tab browser. Satu kali alih pada toggle pratinjau mengonfirmasi kedua sisi interaksi sebelum kode apa pun disalin. Aturan yang sama melayani satu formulir maupun seluruh pustaka komponen.

Pertanyaan umum

Apakah kotak centangnya tetap aksesibel?
Ya. Markup tetap berupa elemen input asli; appearance: none hanya mengganti penggambarannya. Ekspor menyertakan garis luar :focus-visible 3 px dalam warna aksen Anda dan status :disabled yang diredupkan, dan status tercentang tetap yang native yang diumumkan teknologi bantu.
Mengapa lebar tepi saya ditolak?
Gunakan kontrol 18–64 px dan border 1–8 px. Sisakan minimal 8 px di dalam border untuk tanda centang. Kombinasi tidak valid mengosongkan pratinjau dan menonaktifkan ekspor.
Bagaimana ukuran tanda centang ditentukan?
Tanda centang mengikuti ruang di dalam border, bukan ukuran luarnya. Pratinjau dan ekspor memakai bentuk border CSS yang sama. Klik pratinjau atau fokuskan lalu tekan Spasi untuk mengganti status centang bawaan.
Apa yang terjadi saat kotak centang berubah status?
Tanda menskalakan dari nol ke ukuran penuh dalam transisi transform 160 ms sementara latar terisi dengan Warna saat tercentang Anda. Di bawah prefers-reduced-motion transisi dihapus dan status langsung berpindah, jadi tidak ada yang beranimasi bagi pengguna yang sensitif terhadap gerakan.
Apa yang tetap di ekspor dan apa yang bisa saya ubah?
Latar saat diam dan tandanya selalu putih, jadi pilih Warna saat tercentang dengan kontras yang cukup terhadap putih. Garis luar fokus 3 px, offset-nya, dan status :disabled setengah opasitas adalah nilai tetap yang bebas Anda edit setelah menempel aturannya.
Apakah ada yang diunggah?
Tidak. Semuanya dirender secara lokal di tab saat ini, tidak perlu akun, dan tidak ada nilai yang masuk ke penyimpanan, log, atau jaringan. Tekan Atur ulang untuk kembali ke bawaan.

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat

Generator Pola Latar CSS

CSS Background Pattern Generator

Susun pola latar titik, kisi, atau diagonal dari gradien CSS murni tanpa berkas gambar, dengan ukuran ubin, lebar tanda, dan dua warna yang dapat disetel.

Buat