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

Question

在一个表单上，我有两个单选按钮Yes 和No。我想更改单选按钮的默认外观

喜欢这个。

编辑:我想更改 radio按钮进入 <a>如果不容易通过 css 更改默认 radio 的外观，则在启用 JavaScript 时锚定。

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>

附注这使用无处不在的内置 HTML 功能，不需要 javascript。使用一些 CSS 元选择器(:悬停等...)添加动画。

更新:

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