Default radio button is checked but styles to it not working

Question

I have two radio buttons, No and Yes. By default no is checked. I have css that styles the checked elements. But by default the styles only work if you physically check it. I want to style it right of page load without have to select it. Currently I am stumped. Thanks for your help

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

What it looks like on page load:

What It should Look like on page load and after you select it:

Answer 1

I had multiple hidden section with the same name/id, so I juts had to customize each one.

<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>

further down and hidden:

<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>