[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



		<title>Custom Checkboxes</title>



		<style type="text/css">

		body {

			background-color: rgb(126, 126, 126);

			font: 11px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

			color: rgb(255, 255, 255);

		}

		.checkbox {

			background-image: url(checkbox.png);

			background-repeat: no-repeat;

			background-position: 0 0;

			width: 14px;

			height: 14px;

			display: none;

			cursor: default;

		}

		.checkbox-active {

			background-position: 0 -14px !important;

		}

		</style>



		<script language="javascript" type="text/javascript" src="prototype.js"></script>

		<script language="javascript" type="text/javascript">

			function switchCheckbox(event) {

				var anchorTag = event.element();

				var checkbox = $( anchorTag.readAttribute('href') );



				if (checkbox.checked != true) {

					checkbox.checked = true;

					anchorTag.addClassName('checkbox-active');

				} else {

					checkbox.checked = false;

					anchorTag.removeClassName('checkbox-active');

				}



				Event.stop(event);

			}



			Event.observe(window, 'load', function() {

				document.body.select('input[type="checkbox"]').each(Element.hide);

					

				

				var allCheckboxAnchorTags = document.body.select('a[rel="checkbox"]');

				allCheckboxAnchorTags.each(function(element) {
					element.setStyle({display: 'block'});

					element.observe('click', switchCheckbox);

				});

			});

		</script>

	</head>



	<body>

		<form action="" method="get">

			<label>Checkbox 1</label>

			<a href="checkbox-1" class="checkbox" rel="checkbox"></a>

			<input type="checkbox" name="checkbox-1" id="checkbox-1" /><br />



			<label>Checkbox 2</label>

			<a href="checkbox-2" class="checkbox checkbox-active" rel="checkbox"></a>

			<input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked" /><br />



			<label>Checkbox 3</label>

			<a href="checkbox-3" class="checkbox" rel="checkbox"></a>

			<input type="checkbox" name="checkbox-3" id="checkbox-3" /><br />



			<input type="submit" name="submit" id="submit" value="Submit" />

		</form>

	</body>

</html>

[/code]