导读:
通过纯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
通过纯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