Penjana CSS Switch

Laraskan kawalan untuk reka toggle switch, klik pratonton langsung untuk lihat ia beranimasi, kemudian salin HTML dan CSS sedia guna. Tetapkan lebar, tinggi, warna track off/on, warna thumb, kebulatan bucu dan kelajuan transisi — hasilnya ialah toggle berasaskan checkbox standard yang boleh diakses, bukan sekadar bentuk hiasan.

Apakah alat ini?

Toggle switch CSS ialah checkbox yang digayakan supaya kelihatan dan berkelakuan seperti suis on/off fizikal — track berbentuk pil dengan thumb bulat yang meluncur dari satu sisi ke sisi lain. Di sebalik itu ia tetap input checkbox sebenar, dan ini penting: ia mengekalkan kawalan boleh diakses papan kekunci dan boleh digunakan dengan pembaca skrin dan penghantaran borang, tidak seperti switch yang dibina sepenuhnya daripada div boleh diklik.

Alat ini membina corak tersebut untuk anda: checkbox tersembunyi, track yang menukar warna berdasarkan :checked, dan thumb yang meluncur menggunakan transform CSS. Laraskan slider dan pemilih warna, klik pratonton untuk uji animasi toggle sebenar, dan salin kedua-dua CSS serta markup HTML minimum yang ia perlukan.

Sumber: WAI-ARIA Authoring Practices, W3C — mengesyorkan input checkbox sebenar sebagai asas boleh diakses untuk kawalan switch, sebab itulah hasil penjana ini mengekalkan elemen input asas.

Kenapa guna alat ini?

Pratonton ialah toggle sebenar yang boleh diklik — bukan imej statik — supaya anda boleh uji animasi tepat sebelum menggunakannya.
Mengeluarkan kedua-dua CSS dan struktur HTML boleh diakses (input checkbox + label) yang diperlukan CSS itu.
Kawalan penuh terhadap lebar/tinggi track, warna keadaan-off, warna keadaan-on, warna thumb, kebulatan bucu dan kelajuan transisi.
Menggunakan corak checkbox + selector :checked standard, jadi toggle kekal boleh dinavigasi papan kekunci dan berfungsi dalam borang sebenar.
Berjalan sepenuhnya dalam pelayar anda — apa yang anda laraskan tidak dimuat naik ke mana-mana.
Percuma, tiada pendaftaran, berfungsi di telefon.

Cara menggunakannya

Tetapkan lebar dan tinggi untuk saiz track — thumb secara automatik disaiz supaya muat di dalam dengan padding kecil.
Pilih warna keadaan-off untuk rupa lalai (belum ditanda) track, dan warna keadaan-on untuk apabila ia ditogol hidup.
Pilih warna thumb — putih atau neutral cerah biasanya memberikan kontras paling kuat berbanding track.
Tetapkan border radius kepada 50% untuk switch berbentuk pil klasik, atau turunkan untuk segi empat sedikit bulat.
Laraskan kelajuan transisi untuk kawal kelajuan thumb meluncur dan warna track pudar antara keadaan.
Klik toggle pratonton untuk sahkan animasi kelihatan betul, kemudian salin CSS dan HTML ke dalam projek anda.

Contoh

Input

Lebar: 52px · Tinggi: 28px · Warna off: #cbd5e1 · Warna on: #ea580c · Radius: 50% · Kelajuan: 200ms

Hasil

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Teras corak ini: keadaan :checked checkbox, digabungkan dengan selector adik-beradik am (~), memacu kedua-dua warna latar belakang track dan jarak luncuran thumb.

Kenapa checkbox dan bukan div dengan pengendali klik

Ia menggoda untuk bina toggle daripada dua elemen <div> dan sedikit JavaScript yang menukar kelas apabila diklik, tetapi pendekatan itu biasanya merosakkan navigasi papan kekunci, pengumuman pembaca skrin, dan penghantaran borang — checkbox sebenar mengendalikan ketiga-tiganya secara percuma. Corak yang dijana alat ini mengekalkan <input type="checkbox"> sebagai elemen interaktif sebenar (tersembunyi secara visual tetapi masih boleh difokus), dan menggunakan CSS tulen — tiada JavaScript langsung — untuk gayakan track dan thumb berdasarkan keadaan :checked asli checkbox itu.

Gaya switch biasa

Switch pil klasik: border radius pada 50%, saiz sederhana (48–56px lebar), perubahan warna jelas antara on/off.
Switch panel tetapan: saiz lebih kecil (36–44px lebar), warna-off yang lembut (kelabu cerah) berbanding keadaan-on berwarna jenama.
Switch sedikit bulat: border radius sekitar 20–30% dan bukannya pil penuh, untuk rupa lebih segi empat gaya aplikasi.
Switch pantas dan responsif: kelajuan transisi pada 100–150ms terasa segera dan responsif.
Switch perlahan dan sengaja: kelajuan transisi pada 300–400ms dibaca lebih licin dan lebih dipoles, berguna untuk satu toggle tetapan yang menonjol.

Menggabungkan dengan alat CSS lain

Track dan thumb yang dijana sudah menggunakan border-radius di sebaliknya, jadi jika anda mahu variasi bersegi atau bulat berbeza melebihi apa yang slider tawarkan, Border Radius Generator membolehkan anda laraskan setiap bucu secara berasingan sebelum menampal nilai itu. Box Shadow Generator berguna untuk menambah bayang halus pada thumb bagi kedalaman tambahan.

→ Penjana CSS Border-Radius · Penjana CSS Box-Shadow

Soalan lazim

Kenapa hasilnya termasuk HTML, bukan sekadar CSS?

Toggle switch bukan sekadar visual — ia bergantung pada <input type="checkbox"> sebenar dibalut dalam <label>, ditambah elemen track dan thumb yang disasarkan CSS. Tanpa struktur tepat itu, selector berasaskan :checked dalam CSS yang dijana tidak mempunyai apa-apa untuk melekat, jadi kedua-dua bahagian disalin bersama.

Adakah toggle ini boleh diakses?

Ya — kerana elemen interaktif ialah checkbox sebenar (hanya tersembunyi secara visual dengan teknik yang mengekalkannya dalam accessibility tree, bukan display:none), ia kekal boleh difokus dengan Tab, boleh ditogol dengan Space atau Enter, dan diumumkan dengan betul oleh pembaca skrin sebagai checkbox dalam keadaan checked/unchecked semasa.

Bolehkah saya guna ini dalam borang HTML sebenar?

Ya. Kerana elemen asasnya ialah input checkbox standard, anda boleh berikan atribut name dan value dan ia akan dihantar seperti mana-mana checkbox lain — switch yang ditanda menghantar nilainya, yang tidak ditanda ditinggalkan, sama seperti checkbox biasa.

Kenapa thumb bergerak menggunakan transform dan bukan mengubah kedudukan left?

Menganimasikan transform: translateX() dikendalikan oleh compositor pelayar dan kekal licin walaupun pada peranti kelas bawah, manakala menganimasikan left mencetuskan pengiraan semula layout pada setiap frame. CSS yang dijana sentiasa menggunakan transform untuk gerakan luncuran atas sebab ini.

Apa sebenarnya yang dikawal slider border radius?

Ia menskalakan kedua-dua kebulatan bucu track dan kebulatan bucu thumb bersama, secara berkadar dengan tinggi track. Pada 50% anda dapat pil bulat penuh dengan thumb bulat; nilai lebih rendah mengekalkan bentuk lebih segi empat untuk switch gaya aplikasi yang lebih bersegi.