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

Question

我有两个单选按钮，否和是。默认情况下不检查。我有 css 来设置选中元素的样式。但默认情况下，样式仅在您实际检查时才有效。我想在页面加载时设置它的样式，而不必 select 它。目前我很难过。感谢您的帮助

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);}

页面加载时的样子：

它在页面加载时和您 select 之后应该是什么样子：

Answer 1

我有多个相同 name/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>

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

Default radio button is checked but styles to it not working

html

css

radio-button