-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Akshay Pathare edited this page Dec 17, 2017
·
3 revisions
Welcome to the customCheckbox wiki!
Check on Sassmeister for the output
For customizing checkbox as a toggle button, add following in your html,
<input id="box2" type="checkbox">
<label id="label_box2" onTxt="ON" offTxt="OFF" for="box2" class="label-checkbox_toggle"></label>
- Ids you can change as per your need.
- onTxt and offTxt are the values that would be referenced by pseudo elements.If set, a label will be displayed in front of the toggle button.
- label-checkbox_toggle is a main class for toggle button to appear
- Additionally, you can add two more classes, "circle" and "line" on label for different look.
Using custom form checkboxes,
Add class label-checkbox_custom on your label.
This project offers 4 different themes for customizing checkbox.
You just need to add theme class for your label for it to take effect.
For theme0 your html will be:
input id="check1" type="checkbox">
<label id="label_check1" for="check1" class="label-checkbox_custom theme0"></label>