title: Default radio button is checked but styles to it not working
body: <p>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</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="split"&gt;
      &lt;input id="contact-no" type="radio" name="contact" value="No" checked="checked"&gt;
      &lt;label for="contact-no"&gt;No&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="split"&gt;
    &lt;input id="contact-yes" type="radio" name="contact" value="Yes"&gt;
    &lt;label for="contact-yes"&gt;Yes&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.am-form input[type="radio"] + label:hover, .am-form input[type="radio"]:checked + label{background: rgb(239,58,65);}
  </code></pre>
  
  <p><strong>What it looks like on page load:</strong>
  <a href="https://i.stack.imgur.com/Qel9t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qel9t.png" alt="enter image description here"></a></p>
  
  <p><strong>What It should Look like on page load and after you select it:</strong>
  <a href="https://i.stack.imgur.com/xQI08.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xQI08.png" alt="enter image description here"></a></p>