Hi there, after showing you demo of how to Stylize your select box using jQuery, now I will show you how to stylize your checkbox.
Image may be NSFW.
Clik here to view.
To stylize your checkbox, let’s start with html. Create simple html file and add jquery script on top of scripts file. like.
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
After creating above file, create a new file named “stylize_checkbox.js” and write following code in it
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | (function($){ $.fn.checkfyStylize=function(){ this.each(function(){ $(this).wrap(""); var checked=""; if($(this).is(":checked")){ checked="selected"; } $(this).parent().append(''); $(this).change(function(){ if($(this).is(":checked")){ if(!$(this).closest(".c-checkbox").hasClass("selected")){ $(this).parent().find("a").addClass("selected"); } } else{ $(this).parent().find("a").removeClass("selected"); } }); $(this).closest(".c-checkbox").parent().click(function(){ if($(this).find("input").is(":checked")){ $(this).find("a").removeClass("selected"); $(this).find("input").prop("checked",false); } else{ $(this).find("a").addClass("selected"); $(this).find("input").prop("checked",true); } }); $(this).hide(); }); } })(jQuery); |
Now add this javascript in html file and call this custom plugin as follow
1 2 3 4 5 | <script type="text/javascript" src="stylize_checkbox.js"></script><script type="text/javascript">// <![CDATA[ jQuery(document).ready(function(){ jQuery("input[type=checkbox]").checkfyStylize(); }); // ]]></script> |
Now after that add some style to new checkbox, to do that add following code in your html file
After doing all the stuff your final file will look something like this
1 2 3 4 5 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="stylize_checkbox.js"></script><script type="text/javascript">// <![CDATA[ jQuery(document).ready(function(){ jQuery("input[type=checkbox]").checkfyStylize(); }); // ]]></script> |
And when you will view this file in any browser, your output will look like below
Image may be NSFW.
Clik here to view.
In this way you can stylize your checkbox, Later I’ll show you how to Stylize your input type file.