CSS Toggle Switches are a set of accessible CSS-only switch components, created from standard form controls in the markup.
Download from the project page.
Install with Bower:
bower install --save css-toggle-switch
Install with Component:
component install ghinda/css-toggle-switch
How to use it
toggle-switch.css, and use the markup from the documentation.
Use the light switch, instead of a checkbox, for simple On/Off options.
Use the toggle switches, instead of radio buttons, for two or more, specific options.
The toggle switches work on all modern browsers, including mobile ones(even proxy-browsers like Opera Mini).
Browsers without support for media-queries, such as IE8 and bellow, get standard form elements.
onclick="" attribute is required for older iOS and Opera Mini support.
You'll need Grunt:
- Standalone themes are based on Sort Switches / Toggles by Orman Clark, iOS 7 and Android.
- iOS label tap issue and fix reported by Ben Dwyer.
- Refactoring to export the CSS with multiple unit types (px, em, rem) by Henjo Hoeksma.
- List of contributors on Github
CSS Toggle Switches is a project by Ionuț Colceriu.