—–—––
Features
Vector based (fully scalable)
Pure CSS
No Javascript
All you need to do is to include CSS! HTML included to provide implementation examples.
How to use
1. Include ‘fency-style-checkbox.css’ to code.
2. Apply class ‘checkboxWrapper’ and class for checkbox size to parent element. Followings are classes for different sizes:
a.extraSmallCheckboxSize
b.smallCheckboxSize
c.mediumCheckboxSize
d.largeCheckboxSize
e.extraLargeCheckboxSize
Note:-1. If no class for size is applied to parent, it will take ‘largeCheckboxSize’ by default.
2. Any HTML element can be used as parent element.
3. Apply class for theme color to parent. Followings are classes for default themes:
a.theme1
b.theme2
c.theme3
d.theme4
e.theme5
f.theme6
g.theme7
Note:- You can create your own class for custom theme.
4. Add the following HTML code for checkbox within the parent.
<input type=”checkbox” id=”sample1”>
<label for=”sample1”>
<svg version=”1.1” id=”Layer_1” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
width=”50px” height=”50px” viewBox=”0 0 50 50” enable-background=”new 0 0 50 50” xml:space=”preserve”>
<circle fill=”none” stroke=”#B7B7B7” stroke-width=”3” stroke-miterlimit=”10” cx=”25.11” cy=”24.883” r=”23.519”/>
<path fill=”none” stroke-width=”3” stroke-miterlimit=”10” d=”M48.659,25c0,12.998-10.537,23.534-23.534,23.534
S1.591,37.998,1.591,25S12.127,1.466,25.125,1.466c9.291,0,17.325,5.384,21.151,13.203L19,36l-9-14”/>
</svg>
Turquoise Theam
</label>
5. And here you go!!!
Thanks again for purchasing this item.
If you will have any problem in using this, feel free to ask via email on ‘bread.byte.design@gmail.com’.