Sakelar pengalih jatuh ke perpustakaan JavaScript karena ibu jari bulat yang meluncur di trek terlihat seperti skrip. Ini adalah salah satu kotak centang yang menggunakan CSS: tampilan tidak ada yang menghapus seni kotak centang asli, dan elemen semu menggambar trek dan ibu jari.
input[type="checkbox"].switch {
appearance: none;
inline-size: 3rem;
block-size: 1.7rem;
border-radius: 9999px;
background: oklch(0.85 0 0);
position: relative;
transition: background 0.2s;
}
input[type="checkbox"].switch::before {
content: "";
position: absolute;
inset-inline-start: 0.2rem;
block-size: 1.3rem;
inline-size: 1.3rem;
border-radius: inherit;
background: white;
transition: translate 0.2s;
}
input[type="checkbox"].switch:checked {
background: var(--brand);
}
input[type="checkbox"].switch:checked::before { translate: 1.3rem 0; }Apa yang Anda simpan secara gratis
- Semantik formulir: masih merupakan elemen masukan dengan status tercentang, label, radio-dalam-kelompok, segala bentuk dapat dilakukan.
- Perilaku keyboard: Tombol spasi; Tab mencapai; cincin fokus-terlihat membungkus seluruh kontrol karena ini adalah input.
- Penanganan gerakan yang dikurangi: kedua garis transisi berada di dalam gerbang bersama ketika stylesheet merutekan animasi.
- Dukungan nonaktif dan mode gelap melalui palet properti khusus yang sama yang sudah digunakan oleh situs lainnya.
Detail yang memisahkan baik dari gacor
- Jaga jarak yang terlihat antara ibu jari dan tepi lintasan; jempol yang rata terbaca sebagai pil datar dan gagal dalam pemeriksaan kontras pada penglihatan rendah.
- Berikan kontrol identitas ukuran yang terlihat juga: beberapa instrumen masih mengikuti target kursor yang lebih besar dengan penunjuk dibandingkan dengan trackpad.
- Uji tidak dicentang, dicentang, dinonaktifkan, dan fokus terlihat, lalu balikkan mode gelap tingkat OS dan periksa kembali.
Switch yang tidak pernah mengirimkan satu byte pun JS adalah salah satu kemenangan platform yang sangat gacor: HTML menyimpan makna, CSS menarik mode.