Tel: 0113 2170419
www.littlefishwebdesign.com
Funky check boxes in your HTML forms
Tuesday, June 12, 2007
Whilst looking for ways to style check boxes using CSS, I came across a nifty little piece of JavaScript at BrainError.net:
"With the use of CSS you can control how forms on your website look, however certain items like checkboxes, radio buttons and selects cannot be altered, they are rendered by the visitors operating system. There is no way to get around it.
The key to changing their appearance is by not by displaying checkboxes at all, use an image instead, and glue it together with a few lines of JavaScript."
To use the script, you will need four things:
1) The line of code to put in the head section of the webpage on which you want to change the check boxes.
2) The script itself (make sure that (1) points to where you saved this script)
3) An image called 'false.png' (or change the JavaScript)
4) An image called 'true.png' (or change the JavaScript)
This script can be literally installed in a few seconds and looks great. If JavaScript is switched off or isn't used in your visitor's browser, they will see the normal textboxes, so there are no compatibility issues.
See "Changing the appearance of checkboxes".
