检查默认单选按钮，但样式不起作用

Question

我有两个单选按钮，No和Yes。默认情况下不会选中。我有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);}

页面加载时的样子：

在页面加载时以及选择后它应该是什么样子：

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>