CSS Toggle Switches are a set of accessible CSS-only switch components, created from standard form controls in the markup.
You can use them standalone, or with Bootstrap or Foundation.
Download from the project page.
Install with Bower: bower install --save css-toggle-switch
Install with Component(1): component install ghinda/css-toggle-switch
Just include 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.
The onclick="" attribute is required for older iOS and Opera Mini support.
You'll need Grunt:
grunt server
Then
http://localhost:9000/
CSS Toggle Switches is a project by Ionuț Colceriu.
- Standalone themes are based on Sort Switches / Toggles by Orman Clark, iOS 7 and Android.
- iOS label tap issue and fix reported by scruffian.