Simple toggle switch using html, pure css
For further actions, you may consider blocking this person and/or reporting abuse
A Workflow Copilot. Tailored to You.
Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.
Read next
🎉32 Code Tutorials for Visual Learners 🖼
Hanzla Baig -
The Hyper-Specialization Dilemma in Modern Web Development - Rant
Alex R. -
🚀 When to Use VPS, Vercel, and Cloudflare Worker: A Detailed Comparison
Raka Widhi Antoro -
Should you STOP using VPN for Security ?
Dhanush N -
Top comments (8)
Sad that the original CodePen this was inspired from is marked as A11y as it certainly is not accessible (and neither is your version I am afraid because of that).
Not too hard to fix though, instead of hiding the checkbox you need to use a visually hidden class so the checkbox is focusable but not visible.
You then need to add focus indicators to the slider span when the checkbox is focused.
Finally you should ensure there is some text within the label (although as this is a demo that one is just an FYI) so people using a screen reader know what the control is for!
With those three things you should be all set, but please don't use this in production as it is.
Many thanks, very good points!
Quite nice, and also, as chance would have it, I just built a similar toggle a few hours ago for a small web-application :D
That is great! Good job!
Quite a pleasing toggle!
Thanks Keff :D
Nice toggle!
Thank you Gustavo =)