默认单选按钮已选中，但其样式不起作用。

Question

我有两个单选按钮，"否"和"是"。默认情况下，"否"被选中。我有CSS样式来为选中的元素设置样式。但是默认情况下，这些样式只在你手动勾选时才生效。我希望在页面加载时就能正确地设置样式，而不必选择它。目前我卡住了。谢谢你的帮助。

HTML：

<div class="split">
    <input id="contact-no" type="radio" name="contact" value="No" checked="checked">
    <label for="contact-no">No</label>
</div>
<div class="split">
  <input id="contact-yes" type="radio" name="contact" value="Yes">
  <label for="contact-yes">Yes</label>
</div>

CSS

.am-form input[type="radio"] + label:hover, .am-form input[type="radio"]:checked + label{background: rgb(239,58,65);}

在页面加载时的样子： 在页面加载时和选择后应该的样子：

- bilcker

---

@durbnpoisn，如果你不需要为什么要使用JavaScript呢？顺便说一下，它在这里对我而言运行良好：http://jsfiddle.net/8rw31e5p/1/ - billyonecan

这个在FF的页面加载时对我有效：http://jsfiddle.net/nh7vz01h/ - Ben Cook

同意 @blcook223: http://codepen.io/tunecino/pen/eNXKLd 你使用的完整CSS是什么？ - Salem Ouerdani

它对我有效，请检查下面的代码 http://jsfiddle.net/2keh5xkw/ 请提供更多信息，例如CSS / HTML代码和您所针对的浏览器。 - Sachin Kadam

页面上有很多重复的ID。如果您纠正了所有这些问题，问题是否仍然存在？ - Mr Lister

Answer 1

我有多个具有相同名称/ID的隐藏部分，因此我只需定制每个部分即可。

<div class="split">
  <input id="ns-contact-no" type="radio" name="ns_contact" value="No" checked="checked">
  <label for="ns-contact-no">No</label>
</div>
<div class="split">
    <input id="fs-contact-yes" type="radio" name="ns_contact" value="Yes">
    <label for="fs-contact-yes">Yes</label>
</div>

更深入并隐藏：

<div class="split">
  <input id="bs-contact-no" type="radio" name="bs_contact" value="No" checked="checked">
  <label for="bs-contact-no">No</label>
</div>
<div class="split">
    <input id="bs-contact-yes" type="radio" name="bs_contact" value="Yes">
    <label for="bs-contact-yes">Yes</label>
</div>

- bilcker