title: CSS input[type=checkbox]:checkbox
body: <p>I have been trying to figure out why this will not work for me. I have a CSS checkbox that I want to reposition background when checked. Can someone tell me why this isnt working?</p>
  
  <p>Here is original code:
  HTML</p>
  
  <pre><code>&lt;input type="checkbox" /&gt;
  &lt;label&gt;Flight&lt;/label&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>input[type=checkbox]{
  display: none;
  }
  
  
  input[type=checkbox] + label{
  display: inline-block;
  width: 32px;
  height: 32px;
  padding-left: 40px;
  background-position: 0 0;
  background-repeat: no-repeat;
  line-height: 32px;
  cursor: pointer;
  }
  
  input[type=checkbox]:checked + label{
  background-position: left -32px;
  }
  
  label{
  background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_d2a60beb8fb6bbb280642579049ebf65.png); 
  }
  </code></pre>
  
  <p><a href="http://codepen.io/colbydodson/pen/hiaFL" rel="nofollow">Demo</a></p>
  
  <p>Here is fixed code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="checkbox" id="travel_check" /&gt;
  &lt;label for="travel_check"&gt;Flight&lt;/label&gt;
  </code></pre>