Better Check Boxes with jQuery and CSS. Martin Angelov In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable. The first step is to lay down the structure of the underlying HTML document. We will need a form with checkboxes which we will later be replacing with their enhanced jQuery versions. index.html <! The main container element – the #page div, holds our form. Notice the HTML5 data attributes, specified on some of the labels. And here is the markup of our replacement checkboxes: <span class="tzCheckBox checked"><span class="tzCBContent">ON</span><span class="tzCBPart"></span></span> When our plugin is called, it will loop through the checkboxes, and insert the HTML code you can see above after each one, while at the same time hiding the original.
Checkbox Replacements Explained Now lets move on to the styling. jQuery Conclusion. Image rotate to mouse using Jquery and CSS.