title: Cannot style checkbox with CSS?
body: <p>I've even clicked on the 2nd page on Google search results to find out what's going on and have been at this for at least a three hours. What am I not seeing? No amount of css seems to be able to touch the checkbox. </p>
  
  <p><a href="http://codepen.io/munmay/pen/azRNZW" rel="nofollow">Codepen</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="checkbox" id="checkbox-1" /&gt;
      &lt;label for="checkbox-1"&gt;Enable cat&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#checkbox-1:before + label{ 
      background-color: yellow;
      color: yellow;
      background: red;
      outline: 2px solid red;
  }
  
  #checkbox-1:checked + label{ 
      background-color: yellow;
      color: yellow;
      background: red;
  }
  </code></pre>