Turn checkbox inputs into fancy toggle switches by just adding a CSS class

So I’ve made this, a pure CSS/SASS toggle switch, that styles the native 

I like to point just some of the advantages of this approach over other solutions:

1. Checkboxes are very similar to toggle switches. Both have 2 states checked/unchecked on/off;

2. Keep HTML semantic and simple, No extra divs and wrappers.

3. No images used, easily theming and styling, scalable;

4. No javascript required, no click events, no initialization, no life cycle management;

5. Accessible via keyboard and assistive technologies out of the box;

6. Works with labels;

7. You can check then programmatically with pure javascript, jquery or any other javascript library.

8. Compatible with every javascript framework (React, Angular, Vue, Backbone, etc…)

9. It works with javascript disabled, obviously;

10. Gracefully degrades to a plain old checkbox on old browsers.


August 6th, 2017 11:40pm css css3 toggle switch sass bower