title: Change Style of Selected Radio Button Label
body: <p>I'm attempting to change the border color of a radio button label when it is selected in the form. I found this question which is pretty much exactly what I am looking to do: <a href="https://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label">CSS - How to Style a Selected Radio Buttons Label?</a> but when I try it with my own code the color doesn't change on select. This is driving me nuts, I can't figure out why it won't apply the border color - any help is very much appreciated. I have uploaded the code I am working with here: <a href="http://jsfiddle.net/SHfr5/" rel="nofollow noreferrer">http://jsfiddle.net/SHfr5/</a> but I will also include it below.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form name="input" action="/engine/preview.php" enctype="multipart/form-data" id="customizeForm" method="post"&gt;
  &lt;div id="customize_container"&gt;
      &lt;h1&gt;Customize&lt;/h1&gt;
      &lt;div id="customize_left"&gt;
              &lt;div style="float: left"&gt;
              &lt;label for="8dc63f" style="width: 55px;height:55px;background-color:#8dc63f;margin-left:20px;"&gt;&lt;/label&gt;&lt;br/&gt;
              &lt;input type="radio" name="color" id="8dc63f" value="8dc63f" checked /&gt;
              &lt;/div&gt;
              &lt;div style="float: left"&gt;
              &lt;label for="00aeef" style="width: 55px;height:55px;background-color:#00aeef;border:2px solid #000;margin-left:20px;"&gt;&lt;/label&gt;&lt;br/&gt;
              &lt;input type="radio" name="color" id="00aeef" value="00aeef" /&gt;
              &lt;/div&gt;
              &lt;div style="float: left"&gt;
              &lt;label for="ed1c24" style="width: 55px;height:55px;background-color:#ed1c24;border:2px solid #000;margin-left:20px;"&gt;&lt;/label&gt;&lt;br/&gt;
              &lt;input type="radio" name="color" id="ed1c24" value="ed1c24" /&gt;
              &lt;/div&gt;
              &lt;div style="float: left"&gt;
              &lt;label for="f15a29" style="width: 55px;height:55px;background-color:#f15a29;border:2px solid #000;margin-left:20px;"&gt;&lt;/label&gt;&lt;br/&gt;
              &lt;input type="radio" name="color" id="f15a29" value="f15a29" /&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;input type="submit" value="Preview" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@charset "utf-8";
  
  .clear {
      clear: both;
  }
  
  #customize_container {
      width: 840px;
      clear: both;
  }
  
  #customize_left {
      width: 385px;
      float: left;
      margin-top: 35px;
  }
  
  #customizeForm input[type=radio] {
      margin: 5px 0px 40px 43px;
  }
  
  #customizeForm label {
      display:inline-block;
      border:2px solid #000;
  }
  
  #customizeForm input[type=radio]:checked + label {
      border: 2px solid #FFF!important;
  }
  </code></pre>