如何更改单选按钮的默认外观,而不是功能？

Question

在表格上我有两个单选按钮是和否.我想更改单选按钮的默认外观

喜欢这个.

编辑:我想在启用JavaScript时将radio按钮更改为<a>锚点,如果通过css更改默认无线电的外观并不容易.

Answer 1

最简单的方法？将图像设置为标签,for属性指向单选按钮.然后将单选按钮设置为display:none;

<input type="radio" name="radio[1]" /><label for="radio[1]"><img src="/yes.png"></label>
<input type="radio" name="radio[2]" /><label for="radio[2]"><img src="/no.png"></label>

ps它使用内置的HTML功能,可以在任何地方使用,不需要javascript.使用一些CSS元选择器(:hover etc ...)来添加动画.

更新:

经过很长一段时间后回过头来意识到这可以为初学者提供更多的解释.在for标签上设置属性时,单击标签在功能上与单击其for属性指向的元素相同.为完整起见,该for属性应设置为id表单元素的属性.