Generator Saklar CSS Toggle
Hasilkan saklar toggle CSS murni — kotak centang nyata yang dijubah dengan :checked, tanpa JavaScript. Atur ukuran, warna, radius dan kecepatan animasi, pilih nama kelas yang dibatasi, dan salin HTML + CSS yang dapat diakses.
Input
Gaya
Dibatasi pada setengah tinggi — biarkan tinggi untuk pil, turunkan ke 0 untuk saklar persegi.
Warna
Diabaikan oleh gaya bergaris, di mana kenop mengambil warna hidup/mati itu sendiri.
Perilaku & markup
Secara otomatis dinonaktifkan untuk pengunjung yang lebih suka gerak berkurang.
Aturan yang dihasilkan dibatasi pada kelas ini, sehingga tidak akan bertabrakan dengan gaya Anda sendiri.
Biarkan kosong untuk saklar tanpa label yang terlihat.
Output
Saklar toggle Anda akan muncul di sini.
Komponen yang dihasilkan nyata, terisolasi dalam Shadow DOM — klik untuk melihat animasi.
Saklar toggle Anda akan muncul di sini.
Salinan dengan gaya inline dari dua keadaan di atas — berguna untuk mockup. Tidak interaktif.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-switch-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "track",
"width": "56",
"height": "32",
"borderRadius": "40",
"offColor": "#cbd5e1",
"onColor": "#22c55e",
"knobColor": "#ffffff",
"transition": "250",
"knobShadow": "true",
"className": "io-switch",
"labelText": "Enable notifications"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-switch-generator` tool (CSS Toggle Switch 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-switch-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator Saklar CSS Toggle — 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 yang dilakukan alat ini
Generator Saklar CSS Toggle membuat sakelar toggle bergaya iOS dari <input type="checkbox"> nyata dan CSS saja. Atur ukuran, warna, sudut radius dan kecepatan animasi, dan Anda mendapatkan HTML, stylesheet dan pratinjau langsung dari kedua status mati dan hidup.
Tidak ada JavaScript dalam output. Sakelar berubah karena pemilih sibling :checked, yang berarti ia bekerja dengan keyboard, mengirimkan dengan formulir, dan menurun ke kotak centang biasa pada apa pun yang tidak dapat menggayanya.
Cara menggunakannya
- Pilih Gaya Saklar — lihat di bawah untuk apa yang berubah masing-masing.
- Atur Lebar, Tinggi dan Radius Tepi. Biarkan radiusnya tinggi untuk pil, turunkan ke 0 untuk saklar persegi.
- Pilih warna Mati, Hidup dan Kenop.
- Atur durasi Animasi, alihkan bayangan kenop, dan berikan Nama Kelas.
- Salin HTML ke markup Anda dan CSS ke stylesheet Anda.
Tiga gaya
- Trek — kenop berada di dalam trek, diatur dengan satu per delapan dari tinggi. Ini adalah sakelar iOS klasik.
- Ramping — trek adalah batang tipis dan kenop lebih tinggi darinya, menggantung di atas dan di bawah. Ini adalah bentuk Material Design.
- Bergaris — trek transparan dengan batas berwarna, dan kenop mengambil warna hidup/mati itu sendiri. Bagus untuk UI minimal atau mode gelap.
Segalanya yang lain — ukuran, warna, radius, waktu — berlaku untuk ketiga-tiganya, jadi salah satunya dapat didorong jauh dari defaultnya.
Apakah sakelar yang dihasilkan dapat diakses?
Ya, dan di sinilah sakelar yang dihasilkan biasanya terjatuh. Output menjaga kotak centang yang dapat difokuskan asli (tersembunyi secara visual, tidak pernah display: none, yang akan menghapusnya dari urutan tab), menambahkan role="switch", menggambar garis besar :focus-visible sehingga pengguna keyboard dapat melihat di mana mereka berada, menggaya status :disabled, dan membungkus animasi dalam blok prefers-reduced-motion: reduce yang mematikan transisi untuk pengunjung yang meminta gerakan lebih sedikit.
Apakah CSS akan bertabrakan dengan gaya yang ada?
Setiap pemilih dibatasi di bawah nama kelas yang Anda pilih, menggunakan penamaan __input / __track / __label bergaya BEM. Tidak ada yang menargetkan elemen kosong, jadi menempelkannya ke stylesheet yang ada tidak akan mencapai apa pun yang lain. Jika io-switch sudah diambil, ketikkan nama yang berbeda dan seluruh blok diubah nama.
Mengapa pratinjau bersifat statis?
Pratinjau menampilkan kedua status berdampingan dengan gaya inline sehingga Anda dapat membandingkannya sekilas. Aturan :checked dan pseudo-elemen ::before yang nyata tidak dapat berada dalam atribut style inline — versi interaktif adalah HTML + CSS yang Anda salin.
Bagaimana jika saya membutuhkan sesuatu selain sakelar?
Untuk kotak centang atau radio dengan gaya biasa, Generator Kotak Centang HTML menghasilkan markup. Untuk menyempurnakan bentuk, gunakan Generator Radius Tepi CSS, dan untuk bayangan jatuh kenop Generator Bayangan Kotak CSS memberikan Anda kontrol yang lebih besar. Memilih warna hidup/mati yang terbaca dengan baik bersama-sama lebih mudah dengan Mixer Warna.