Fancy Checkbox Free Download


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=”” xmlns: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 ‘’.

   View Demo     Download


Please enter your comment!
Please enter your name here