Wednesday, September 22, 2004

Creating custom HTML checkboxes

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>
&nbsp;<input type="text" name="my_checkbox" id="my_checkbox" size="1" value="0">

</p>
</form>
</body>
</html>

posted by Παναγιώτης Βρυώνης @ 9/22/2004 02:52:00 AM   2 comments

2 Comments:

At 8:14 AM, Anonymous Anonymous said...

Unfortunately all the computers I tried this on simply showed an "a" character in a box - the Webdings font is not something you can rely on to be available.

 
At 10:39 AM, Blogger Παναγιώτης Βρυώνης said...

Right... Windows have windings?

Or maybe you can use a simple "x" but it does not look as nice...

 

Post a Comment

<< Home