自定义 checkbox 样式

导读：
　　通过纯css而不是javascript来实现。想法来自The Default Checkbox and Radio Button Graphics Are Ugly?，checkbox 和radio 样式效果来自 Adonia 主题。当然，IE是不行的。firefox和opera都没问题。
　　 < form id="form1"> < input id="check1" type="checkbox" /> 选项一 < input id="check2" type="checkbox" /> 选项二 < input id="check3" type="checkbox" /> 选项三 < input id="check4" type="checkbox" /> 选项四 < hr /> < input name="radioa" id="radio1" type="radio" /> 单选一 < input name="radioa" id="radio2" type="radio" /> 单选二 < input name="radioa" id="radio3" type="radio" /> 单选三 < input name="radioa" id="radio4" type="radio" /> 单选四
　　
　　[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
　　这个css的精髓在于 + 选择器(Adjacent sibling selectors)的运用。拿到 input[type="checkbox"]后面的 label，并控制其样式。
　　一开始，我是这样的结构
　　 选项一
　　我更喜欢 label 在外面，这样顺便可以控制表单的布局（类似于原来 td 的作用）。但是似乎没有这种选择器— 包含b子节点的a，郁闷...谁有什么好建议？

本文转自
http://blog.guoshuang.com/showlog.asp?log_id=4214&cat_id=31