Author: | EvanLiu2968 |
---|---|
Views Total: | 20,186 views |
Official Page: | Go to website |
Last Update: | December 4, 2017 |
License: | MIT |
Preview:

Description:
el-checkbox is a pure CSS/CSS3 library to create custom checkboxes, radio buttons, and iOS-style toggle switches.
Features:
- 4 themes: default, red, green, and yellow.
- 3 sizes: default, small, and large.
How to use it:
Just insert the checkbox.css
in the document and you’re ready to go.
<link rel="stylesheet" href="./dist/checkbox.css">
Beautify the default checkbox and radio inputs.
<div class="el-checkbox"> <span class="margin-r">Unchecked</span> <input type="checkbox" name="check" id="1_1"> <label class="el-checkbox-style" for="1_1"></label> </div> <div class="el-checkbox"> <span class="margin-r">Checked</span> <input type="checkbox" name="check" id="1_2" checked> <label class="el-checkbox-style" for="1_2"></label> </div> <div class="el-radio"> <span class="margin-r">Unchecked</span> <input type="radio" name="radio1" id="2_1" value="option" checked> <label class="el-radio-style" for="2_1"></label> </div> <div class="el-radio"> <span class="margin-r">Checked</span> <input type="radio" name="radio1" id="2_2" value="option" checked> <label class="el-radio-style" for="2_2"></label> </div>
To create an iOS-style toggle switch.
<label class="el-switch"> <input type="checkbox" name="switch"> <span class="el-switch-style"></span> </label>
Set the size.
<label class="el-checkbox el-checkbox-sm"> <span class="margin-r">small checkbox</span> <input type="checkbox" name="check" checked> <span class="el-checkbox-style pull-right"></span> </label> <label class="el-checkbox el-checkbox-lg"> <span class="margin-r">large checkbox</span> <input type="checkbox" name="check" checked> <span class="el-checkbox-style pull-right"></span> </label>
Change the default themes.
<div class="el-checkbox el-checkbox-green"> <span class="margin-r">Unchecked</span> <input type="checkbox" name="check" id="2_1"> <label class="el-checkbox-style" for="2_1"></label> </div> <div class="el-checkbox el-checkbox-red"> <span class="margin-r">Unchecked</span> <input type="checkbox" name="check" id="3_1"> <label class="el-checkbox-style" for="3_1"></label> </div> <div class="el-checkbox el-checkbox-yellow"> <span class="margin-r">Unchecked</span> <input type="checkbox" name="check" id="4_1"> <label class="el-checkbox-style" for="4_1"></label> </div>