title: Border around label if radio is checked
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/5275857/highlight-label-if-checkbox-is-checked-html-css">Highlight label if checkbox is checked (html/css)</a>  </p>
  </blockquote>
  
  
  
  <p>I would like label to get a red border if radio is checked.</p>
  
  <p>Code so far:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;center style="margin-top:20px;"&gt;
  
  &lt;label class="big"&gt;
  This is a box 1
  &lt;input name="radio-group1" type="radio" /&gt;
  &lt;/label&gt;
  
  &lt;br/&gt;
  
  &lt;label class="big"&gt;
  This is a box 2
  &lt;input name="radio-group1" type="radio" class='sex' /&gt;
  &lt;/label&gt;
  
  &lt;/center&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.big {
      display:block;
      width:100px;
      height:100px;
      background-color:gainsboro;
      cursor:pointer;
  }
  
  .big:hover {
  
      border:1px solid blue;
  }
  </code></pre>
  
  <p>No JS solutions please. I have been trying with sibling and children selectors but unsuccesfuly.</p>
  
  <blockquote>
    <p><strong>JSFIDDLE: <a href="http://jsfiddle.net/QqVCu/10/" rel="nofollow noreferrer">http://jsfiddle.net/QqVCu/10/</a></strong></p>
  </blockquote>