DEV Community

Saba Alikhani
Saba Alikhani

Posted on

Toggle Switch using pure css

Simple toggle switch using html, pure css

Top comments (8)

Collapse
 
grahamthedev profile image
GrahamTheDev

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.

Collapse
 
fydsa profile image
Saba Alikhani

Many thanks, very good points!

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

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

Screenshot depicting three checkboxes styled as toggle switches in a neumorphism-like theme

Collapse
 
fydsa profile image
Saba Alikhani

That is great! Good job!

Collapse
 
nombrekeff profile image
Keff

Quite a pleasing toggle!

Collapse
 
fydsa profile image
Saba Alikhani

Thanks Keff :D

Collapse
 
guscarpim profile image
Gustavo Scarpim

Nice toggle!

Collapse
 
fydsa profile image
Saba Alikhani

Thank you Gustavo =)