FormsLesson 139Preview gratis
Toggle Switch
Lesson ini bagian dari How To · Semua level
Ringkasan
Toggle switch adalah kontrol on/off yang dibuat dari checkbox dan elemen slider. Checkbox menyimpan status sebenarnya, sementara slider menampilkan posisi knob dan warna latar. Pseudo-class :checked menggerakkan knob serta mengubah warna saat switch diaktifkan.
Poin kunci
- Checkbox menjadi sumber status on/off yang dapat dikirim bersama form.
- Label membungkus checkbox dan slider agar seluruh switch dapat diklik.
- Slider memakai ::before sebagai knob yang digeser dengan transform.
- :checked + .slider mengubah warna dan posisi knob.
- Sertakan focus-visible agar switch dapat digunakan dengan keyboard.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.