Simple toggle switch using html, pure css
For further actions, you may consider blocking this person and/or reporting abuse
Simple toggle switch using html, pure css
For further actions, you may consider blocking this person and/or reporting abuse
Mark Munyaka -
Gav -
Marcus Kohlberg -
Nozibul Islam -
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 =)