title: Styling input elements with CSS3 by wrapping input with a label
body: <p>CSS3 experts:</p>
  
  <p>I'm trying to re-style an input checkbox, I can do it with the following style if I give each input an ID and refer to it with a label and it's "for" property:</p>
  
  <pre><code>&lt;input class="checkbox" type="checkbox" id="myCheckBox&gt;&lt;label for="myCheckBox"&gt;foo&lt;/label&gt;
  </code></pre>
  
  <p>I'd like to loose the id's to simplify so I tried wrapping the input with the label but I can't seem to figure out how to style it:</p>
  
  <pre><code>&lt;label&gt;foo&lt;input class="checkbox" type="checkbox"&gt;&lt;/label&gt;
  </code></pre>
  
  <p>This is my working CSS using IDs:</p>
  
  <pre><code>.checkbox {
      display:none;
  }
  .checkbox + label {
      cursor:pointer;
      background-color: #fff;
      border:1px solid #333;
      padding:9px;
      border-radius:5px;
      display: inline-block;
      position: relative;
      top:3px;
      width:10px;
      height:10px;
  }
  .checkbox:checked + label {
      background-color: #e00000;
      border: 1px solid #e00000;
      color: #fff;
  }
  .checkbox:checked + label:after {
      color: #fff;
      width: 100%;
      text-align: center;
      font-size:1em;
      line-height:1em;
  }
  </code></pre>
  
  <p>Totally got me stumped, any help would be appreciated :)</p>