ARC – Adam’s Radio/Checkbox customisation
A couple of months ago it dawned on me that you could abuse the
label element in the same was as we use
background‘s for bulleted lists instead of the less configurable
Just before I was about to publish my ideas I found out that a guy named Jacob Rask has just come up with almost the exact same method. My version does things a bit differently (I feel its a bit more customisable, it also handles keyboard entry) but hopefully by publishing what I have now we can come up with some definative method for the customisation of widgets.
About This Method
The script parses a specified form for input types and associated labels. If the input type is found to be a radio button or checkbox then the widget is hidden and the label is altered to display a custom widget-style-image by modifying the label’s CSS style.
The beauty of using the labels to display the custom image is that the design is inherently accessible – that is, clicking on the label also selects the radio (by design), so the action is guaranteed to occur.
From my tests I’ve found this method to work with:
- Firefox (1.0.3) Windows
- IE (5.5 & 6)
- Mozilla (1.7.2) – probably all
- Opera (7 & 8)
- Netscape (6.1)
- “Firefox 1.0.4 on Linux, works fine; also with Konqueror no problems”
I believe there were some issues with Mac IE (i’ve decided not to support it anymore anyhow), and Netscape versions prior to version 6.
Since I don’t have every browser/version i’d appreciate any comments regarding browsers not listed above. Thanks!