This combination of JavaScript and CSS will hide checkbox and radio inputs that have a class = "crirHiddenJS", an id, and a proper label tag.
This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. If javascript is disabled no inputs will be hidden and the form is still be fully functional.
Checkboxes
Normal (not replaced) This is the Label This is the Label with a long name This is the LabelRadio Buttons - all in the same group
Normal (not replaced) This is the Label This is the Label with a long name This is the LabelOther Samples
Green / Grey BoxesImplementation
Using CRIR is fairly simple and you should be able to get it up and running in a couple minutes. You will need to include the crir.js javascript file and the crir.css stylesheet in the head of your page. To do so place these lines of code somewhere between the <head> and </head> tags:
<link href="/crir/crir.css" rel="stylesheet" type="text/css" /><script language="JavaScript" type="text/javascript" src="/crir/crir.js"></script>
You will need to change the path to the files according to your particular setup.
You then need to specify which Checkboxes and Radio Buttons you would like to replace. Add class="crirHiddenJS" to the input tag for the element you want to replace.
<input name="turtleDoves" id="checkbox1" type="checkbox" value="true" class="crirHiddenJS" />Your input will also need a label tag. The Label tag is the standard way of... well... labelling a field!. To add a label tag you simply need to add the label tag before the input element.
<label for="checkbox1">Turtle Doves</label><input name="turtleDoves" id="checkbox1" type="checkbox" value="true" class="crirHiddenJS" />
Note the for attribute needs to be specified. This tells the browser which input element the label is for. Simply set the for attribute of the label equal to the value of the id attribute of the input element.
That's all there is to it. Now all you have to do is modify the CSS stylesheet file crir.css to meet your needs. The CSS gets applied to the label tag for each of the hidden input elements. The class names used are:
checkbox_checkedcheckbox_unchecked
radio_checked
radio_unchecked
Take a look at the the CSS I've created to get started creating your own.
Updates
- July 27, 2006 - Jesse Gavin sent me some improvements to the script which I have added. You no longer need to initialize the script using <body onload="crir_init()">. He's also converted the script to JSON format so it will not interfere with any other functions running on your page.
- July 30, 2006 - Based on tip left by Adam Burmister on my blog post about CRIR I've added the ability to use the keyboard to tab to each input element and use the spacebar to check / uncheck the element. This was the one major usability flaw with CRIR, and I'm glad to have it fixed. I've also fixed a few minor bugs that were brought to my attention.
- August 15, 2006 - Bug Fix
- Oct 30, 2006 - Bug Fix - Special Thanks to Claudio Tassitano for pointing out the bugs.
- Nov 16, 2006 - The script will no longer run in Safari. Safari does not support clicking on a label to toggle the form element so I've disabled this script from running on Safari as a quick fix.
