archive about

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):

How to create a custom checkbox.

2004-09-22, Panayotis Vryonis


<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;

<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

<form name="myform">
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">