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

Question

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

喜欢这个。

修改我想在启用JavaScript时将radio按钮更改为<a>锚点，如果通过css更改默认广播的外观并不容易。< / p>

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>

P.S。这使用内置的HTML功能，可以在任何地方使用，不需要javascript。使用一些CSS元选择器（：hover etc ...）来添加动画。

更新：

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

Answer 2

我不是试图强制图像与<radio>标签一起使用，而是将图像放在您想要的位置，使用jQuery将各种行为绑定到它们，并让它们修改隐藏的输入字段。我认为这样会更容易。