This is some css that allow you to style (in CSS3 and HTML5) the input type=checkbox
elements as a toggle switch
To enjoy it just link to your template or to your stylesheet the css/style.css
file.
You can also use the less file available at less/style.less
. With this file you can overide easily customize the Less variables listed below in order to define colors, sizes and more.
In order to avoid the animation behave on load, don't forget to include the jquery.preload.js
script (located at /js
), and add and .preload
class to you body
Install and manage Toggle Switch using Bower.
$ bower install toggle-switch
The variables are divided in two categories, the modules
and the themes
. The module variables change the structure and the behave of the component in your template. The theme just change the look without size or layout consequences. Those two kinds of variables are called parameters
and you can find them in /less/parameters
input class=toggle-switch id=example-1 type=checkbox
label for=example-1Labellabel
input class=toggle-switch id=toggle-switch-example-2 type=checkbox checked
label for=toggle-switch-example-2Labellabel
input class=toggle-switch id=toggle-switch-example-3 type=checkbox disabled
label for=toggle-switch-example-3Labellabel
input class=toggle-switch id=toggle-switch-example-4 type=checkbox disabled checked
label for=toggle-switch-example-4Labellabel
with love from Nantes