Transform Checkbox Into Toggle Switch - jQuery switchify
File Size: | 6.12 KB |
---|---|
Views Total: | 1597 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

switchify is a simple, lightweight jQuery plugin that transforms the regular checkbox input into iOS style toggle switches with a single JS call.
See Also:
- 10 Best Toggle Switches In JavaScript & Pure CSS
- 10 Best Custom Checkbox And Radio Input Replacements
How to use it:
1. Add references to jQuery library and the switchify plugin's files.
<!-- jQuery --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- switchify --> <link rel="stylesheet" href="/path/to/src/switchify.css"> <script src="/path/to/src/switchify.js"></script>
2. Initialize the plugin on the checkbox input and done.
<input class="toSwitch" id="option1" type="checkbox" name="option1" checked /> <input class="toSwitch" id="option2" type="checkbox" name="option2" checked /> <input class="toSwitch" id="option3" type="checkbox" name="option3" /> ...
$(function(){ $('input[type=checkbox]').switchify(); });
3. Override the default styles of the switch.
label.switchify.switchify-label { display: inline-block; } label.switchify.switchify-label > input.switchified { display: none; } label.switchify.switchify-label > span.switchify-switch { display: block; background-color: #cecece; height: 1em; width: 1.6em; position: relative; border: 1px solid #cecece; border-radius: 1em; transition: background-color 0.25s, border-color 0.25s; } label.switchify.switchify-label > span.switchify-switch::after { content: ""; background-color: #fff; display: block; height: 1em; width: 1em; position: absolute; border-radius: 1em; left: 0; transition: left 0.25s; } label.switchify.switchify-label > input.switchified:checked + span.switchify-switch { background-color: #4bcc23; border-color: #4bcc23; } label.switchify.switchify-label > input.switchified:checked + span.switchify-switch::after { left: calc(100% - 1em); }
This awesome jQuery plugin is developed by borjagq. For more Advanced Usages, please check the demo page or visit the official website.