Pembuat Checkbox CSS
Buat checkbox CSS yang bergaya khusus atau saklar toggle — pilih gaya, warna, ukuran, radius sudut dan kecepatan animasi, lalu salin CSS + HTML yang siap pakai. Pure CSS, accessible dengan keyboard, tanpa JavaScript.
Input
Tinggi kotak. Gaya Saklar Toggle 1.8× lebih lebar dari tingginya.
Digunakan untuk status terpilih dan focus ring keyboard.
Warna border saat tidak terpilih — warna trek untuk gaya Saklar Toggle.
Tanda centang, silang atau knob toggle. Diabaikan oleh Garis Tepi, yang menggambar tanda centangnya dalam warna aksen.
Berlaku pada gaya kotak. Lingkaran Terisi dan Saklar Toggle selalu fully rounded.
Panjang transisi check/uncheck (0.05-1s).
Ditampilkan di samping checkbox di snippet HTML. Kosongkan untuk kontrol tanpa label.
Menggunakan namespace setiap class yang dihasilkan sehingga CSS tidak dapat bertabrakan dengan stylesheet Anda.
Output
Checkbox Anda akan muncul di sini.
Checkbox yang dihasilkan sebenarnya, terisolasi dalam Shadow DOM — klik untuk melihat animasi.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-checkbox-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "filled",
"size": "24",
"accentColor": "#2563eb",
"borderColor": "#9ca3af",
"checkColor": "#ffffff",
"radius": "6",
"duration": "0.2",
"labelText": "I agree to the terms",
"classPrefix": "io"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-checkbox-generator` tool (CSS Checkbox Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-checkbox-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Checkbox CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa fungsinya
Pembuat Checkbox CSS membangun checkbox yang bergaya khusus — atau saklar toggle — sebagai snippet CSS + HTML yang mandiri. Pilih gaya, atur warna, ukuran, radius sudut dan kecepatan animasi, lalu salin kedua blok kode langsung ke proyek Anda. Semuanya adalah pure CSS: tanpa JavaScript, tanpa icon font, tanpa SVG sprite, tanpa dependensi apapun.
Ini menggaya checkbox sebenarnya, bukan yang palsu
Sebagian besar snippet checkbox khusus menyembunyikan <input> native di luar layar dan menggambar <span> di sebelahnya. Itu bekerja secara visual tetapi melepaskan semuanya yang diberikan browser secara gratis. Generator ini malah menetapkan appearance: none pada <input type="checkbox"> sebenarnya dan melukis kotak, tanda centang dan knob toggle dengan pseudo-element ::before / ::after.
Perbedaan praktis: kontrol masih menerima focus dengan tombol Tab, masih toggle dengan Space, masih mengirimkan nilainya dengan form di sekitarnya, dan masih diumumkan sebagai checkbox oleh screen reader — tanpa satu baris markup atau ARIA tambahan.
Setiap stylesheet yang dihasilkan juga mengirimkan tiga hal yang biasanya checkbox copy-paste lewatkan:
- ring
:focus-visibledalam warna aksen Anda, sehingga pengguna keyboard dapat melihat di mana mereka berada; - status
:disabled(dimmer, cursornot-allowed); - blok
@media (prefers-reduced-motion: reduce)yang mematikan transisi dan animasi bounce untuk siapa saja yang meminta sistem mereka mengurangi motion.
Enam gaya
- Kotak Terisi — klasik: kotak berkuran yang terisi dengan warna aksen dan mengungkapkan tanda centang yang digambar dari border putar.
- Garis Tepi — kotak tetap transparan; hanya border dan tanda centang yang mengambil warna aksen. Bagus di latar belakang gelap atau sibuk.
- Lingkaran Terisi — perilaku isi-dan-tanda-centang yang sama dalam kotak yang fully round.
- Saklar Toggle — trek bentuk pil dengan knob yang meluncur ke seluruhnya saat dicentang. Markup masih checkbox, jadi bekerja dalam form tanpa perubahan.
- Jelly Bounce — kotak terisi dengan squash-and-stretch
@keyframesbounce saat dicentang. - Tanda Silang — terisi dengan warna aksen dan ditandai dengan ✗ alih-alih ✓, untuk semantik "excluded" atau "removed".
Cara menggunakannya
- Pilih Gaya Checkbox.
- Atur Ukuran — tinggi kotak dalam pixel. Saklar Toggle secara otomatis 1.8× lebih lebar dari tingginya.
- Pilih tiga warna: Aksen (status terpilih dan focus ring), Tidak Terpilih (border saat istirahat, atau trek toggle) dan Tanda Centang (tanda centang, silang atau knob).
- Sesuaikan Radius Sudut untuk gaya kotak dan Durasi Animasi untuk transisi check/uncheck.
- Atur Teks Label dan, jika proyek Anda sudah menggunakan nama class generic, Class Prefix — setiap class yang dihasilkan di-namespace dengannya, jadi aturan tidak dapat bertabrakan dengan stylesheet yang ada.
- Salin CSS ke stylesheet Anda dan HTML ke markup Anda.
FAQ
Apakah ini masih akan bekerja di dalam <form>?
Ya. Elemen yang bergaya adalah checkbox, jadi mengirimkan name dan value tepat seperti yang tidak bergaya. Tambahkan name="..." ke <input> dalam markup yang dihasilkan.
Bagaimana cara menggunakan beberapa di satu halaman?
Tempel CSS sekali dan gunakan kembali markup <label> sebanyak yang Anda suka — aturan berbasis class, bukan ID. Untuk dua tampilan berbeda di satu halaman, hasilkan gaya kedua dengan Class Prefix berbeda.
Mengapa Warna Tanda Centang diabaikan oleh gaya Garis Tepi? Garis Tepi secara sengaja menjaga kotak tetap transparan, jadi tanda centang putih tidak akan terlihat di halaman terang. Gaya itu selalu menggambar tanda centangnya dalam warna aksen.
Apakah Radius Sudut melakukan sesuatu untuk lingkaran atau saklar? Tidak — keduanya selalu fully rounded by design. Radius berlaku pada Kotak Terisi, Garis Tepi, Jelly Bounce dan Tanda Silang.
Apakah alat ini mengunggah sesuatu? Tidak. Snippet dihasilkan di browser Anda dari nilai yang Anda pilih; tidak ada yang dikirim ke server atau disimpan.
Alat Terkait
Butuh CSS form atau component lain? Pembuat Animasi Loading CSS membangun spinner pure-CSS yang cocok, Pembuat Box Shadow CSS membantu Anda menggaya kartu tempat form berada, dan Pembuat Animasi Keyframe CSS adalah tempat yang tepat jika Anda ingin menulis animasi check kustom Anda sendiri. Untuk mengecilkan stylesheet yang selesai sebelum pengiriman, jalankan melalui CSS Minifier & Beautifier.