During the g-metrics redesign (it will soon be ready!), I faced a common problem in HTML design: while most elements on a HTML page can be easily an nicely customized using CSS, checkboxes and radio button keep their original, browser-specific look.
I looked arround the Internet, but the alternatives I found were based on creating a little “checked” and the related “unchecked” image and swapping them using javascript. This approach has many problems, and the most important one is that you have to create a different set of images for every size, color, etc. you want to use.
So I came up with a solution that I consider more elegant and easy to use. It is based on displaying a “webdings” (font containing special images) “check” inside an area with border. Javascript is used to dynamicaly change the font color so that the check becomes visible/invisible every time you click. It is easy to acheve other effects (like garying-out when unchecked) just by changing the colors.
Here is a sample code (you can view it here):
<html>
<!–
How to create a custom checkbox.
2004-09-22, Panayotis Vryonis
http://g-metrics.blogspot.com/
–>
<head>
<style type=”text/css” media=”screen”>
.customCheckboxON { color: #0000aa ; }
.customCheckboxOFF { color: #ffffff ; }
.customCheckbox {
color: #ffffff ;
border: 2px #0000aa solid ;
background: #ffffff ;
font-weight: bold ;
font-family: webdings;
}
</style>
<script language=”JavaScript” type=”text/javascript”><!–
function chkHandler(id) {
var obj = document.getElementById(id) ;
c = obj.className ;
if (c == ‘customCheckboxON’) {
obj.className = ‘customCheckboxOFF’ ;
document.myform.my_checkbox.value = 0 ; //update a form field
}
else {
obj.className = ‘customCheckboxON’ ;
document.myform.my_checkbox.value = 1 ; //update a form field
}
}
//–>
</script>
</head>
<body>
<form name=”myform”>
<p>
Check this: <span class=”customCheckbox”><span id=”box1″ onClick=”chkHandler(‘box1′);” >a</span></span>
<input type=”text” name=”my_checkbox” id=”my_checkbox” size=”1″ value=”0″>
</p>
</form>
</body>
</html>