Professional check box without framework
There are many tutorials showing how to improve the appearance of check boxes, working with jQuery or Mootools or other Ajax framework. But these frameworks are they really necessary in this case?
To insert a check box on the page, the code is:
<button type="button" class="prettycb" value="0" onclick="setcbimg(this)"></button>
1) We use the object <button> and not <input> because the value of the latter is displayed and it is not what we want here. In the case of the button object it is the content between the opening and closing tags that appears.
2) We specify the type "button", it is essential if we want the value attribute managed by browsers (according to our tests).
The CSS code
box-shadow:1px 2x 3px #AAA;
-webkit-box-shadow:1px 2px 3px #AAA;
var v = 1 - element.value;
var z = new Image();
z.src = "check.png"
z.src = "uncheck.png"
element.style.backgroundImage="url(" + z.src + ")";
This function is called when you click on the box, to check or uncheck.
The value in the value attribute is reversed, and according to the new value, is displayed the image of the box checked or not.
This principle allows us to use the form object to store the on/off state, and avoids variables to manage to do so. It is easier to deploy...
Customizing the checkbox
To alter them, just change the two images.
And to manage the problems of alignment of the box with the label on the left, you may add a margin at the top of the image with a transparent background or a CSS code to align the label.
But this is not supported by all browsers.