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

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

喜欢这个

---

编辑：如果不容易通过css更改默认单选按钮的外观，我想在启用JavaScript时将

单选按钮更改为
锚定按钮。
与其试图强制图像使用
标记，我只会将图像放在您想要的地方，使用jQuery将各种行为绑定到它们，并让它们修改隐藏的输入字段。我想那样会容易得多。
最简单的方法？使用指向单选按钮的
for
属性将图像设置为标签。然后将单选按钮设置为
显示：无

<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、 它使用内置的HTML功能，在任何地方都可以使用，不需要javascript。使用一些CSS元选择器（：hover等）添加动画

更新：

经过很长一段时间的循环，我意识到这可能需要给初学者更多的解释。在标签上设置了
for
属性时，单击标签在功能上与单击其
for
属性所指向的元素相同。为完整起见，应将
For
属性设置为表单元素的
id
。
很抱歉，我当时正在努力了解自己。如果按钮按惯例隐藏/不显示，则该按钮似乎不会更新（要找到该按钮，需要使用
input[type=radio]+label{color:red；}
或某种JS样式表（您的版本尚未提供任何视觉反馈）。我发现标签的样式表只有在缩放时才会重新评估，这表明通过JS你也无法检测到选中的按钮。非常规地隐藏它？？la
opacity:0
有效。@Ruben很有趣。我没有试图提供任何方法来直观地指示选择了哪个单选按钮。我只是提供了这是一种隐藏单选按钮，但在不使用javascript的情况下单击某个UI元素时将其选中的方法。如果你就如何在mobile chrome中使用它写一个答案，我肯定会给你一个答案+1@Ruben另外，您是否尝试过在css中执行类似于
input[type=radio]：checked+label{color:red；}