Inside Technique : Custom Checkboxes
By Scott Isaacs

In this article, we create a cross-browser custom checkbox for Netscape Navigator 3.0 and later and Internet Explorer 4.0 and later. All other browsers are provided a standard checkbox. At a high-level, this is a very simple task. You create two images that represent both the clicked and unclicked state of the checkbox, add a hidden form element that represents the checked state of the image, and on each click swap images and update the form element. The form element is needed if you want the state of the checkbox to be submitted to the server.

Below is a demonstration (Netscape 3.0 users will find the demo at the end of this page) of a custom checkbox. We are displaying the corresponding input boxes to help you see how this works. Normally the input boxes would be of type hidden. If you are running Internet Explorer 3.0, you should see the standard checkbox.

This technique relies on dynamically writing contents into the page using the document.write() method. Netscape has known issues where writing contents into tables sometimes does not work. This is why the demonstration is provided at the end of the page (in Netscape, the page is constructed with tables). If you must put the checkboxes in a table, the most reliable work-around is to write the entire table out using script. At the end of this article, we explain how to eliminate the document.write's completely by hard coding the checkboxes into the page.

Next, we take you through the steps for creating custom checkboxes.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.