效果不错的 Radio/Checkbox 自定义外观

在别的地方看到这个文章,看了演示觉得还不错,先转过来,有时间研究一下,自己打一个包

留着以后慢慢用,贴下来先,免得要的时候找不到了

原文：http://www.flog.co.nz/index.php/journal/arc-adams-radiocheckbox-customisation/
演示：http://www.flog.co.nz/lab/ARC/ARC.htm

This is an experiment using Javascript and CSS to customize the appearance of radio buttons, WHILE remaining accessible.
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 list-style-image.
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.

• Download Javascript Source
• Download Example CSS
• ARC Demonstration

About This MethodThe 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.
This means that if you disabled styles, javascript, or both, the widget-group still works as per-usual.
When javascript is disabled the initARC() code is not executed upon load. This code associates an onClick() action listener to the widget’s associated label elements. By not having the onClick() action inline (inside the HTML code) the HTML code for the radio and labels are kept as simple and clean as possible (see below).

Test ResultsFrom 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)
• Safari
• “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!