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

Question

在一个表单中，我有两个单选按钮是和否。我想要改变单选按钮的默认外观，如下图所示： 编辑：如果通过CSS难以改变默认单选按钮的外观，我希望在启用JavaScript时将单选按钮更改为<a>锚点。

- Jitendra Vyas

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等）添加动画效果。

更新：

回过头来看，我认识到这需要更多的解释才能帮助初学者理解。 当标签上设置了for属性时，单击该标签与单击其for属性指向的元素的功能相同。 为了完整起见，for属性应设置为表单元素的id。

- Endophage

---

抱歉之前的评论没有帮上忙，当时我正在尝试自己解决问题。如果按钮被传统隐藏/不显示，它似乎不会更新（要找出这个问题，你需要一个类似于input[type=radio] + label { color:red ;}的样式表或一些JS（你的版本还没有给出任何视觉反馈）。我发现标签的样式表只有在缩放时才会重新评估，而这个fiddle通过JS显示无法检测到选中的按钮。采用非传统的隐藏方式，如opacity: 0可以解决这个问题。 - Ruben

@Ruben 很有趣。我并没有试图提供任何可视化指示哪个单选按钮被选中的方法。我只是提供了一种隐藏单选按钮但在某些 UI 元素被点击时将它们选中而不使用 JavaScript 的方法。如果你写出一个关于如何使它在移动版 Chrome 中工作的答案，我肯定会给你一个 +1。 - Endophage

@Ruben，另外，你尝试过在CSS中使用类似于input[type=radio]:checked + label { color:red; }的代码吗？ - Endophage

Answer 2

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

- eykanal