title: Image replacement for Checkbox
body: <p>I'm trying to use a custom image for checkboxes, as discussed in this question:</p>
  
  <p><a href="https://stackoverflow.com/questions/3772273/pure-css-checkbox-image-replacement">Pure CSS Checkbox Image replacement</a></p>
  
  <p>My checkboxes appear in a grid, so don't need a label associated with them.  However, I find that if the label isn't present, the technique discussed in that question doesn't work.</p>
  
  <p>For example, here's the relevant css:</p>
  
  <pre><code>input[type=checkbox] {
      opacity: 0;
  }
  
  input[type=checkbox]  {
      height: 17px;
      width: 17px;
      background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat;
  }
  
  input[type=checkbox]:checked {
      background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat;
      height: 17px;
      width: 17px;
      padding: 0 0 0 0px;
  }
  </code></pre>
  
  <p>Declaring just a simple <code>input</code> doesn't render the image:</p>
  
  <pre><code>&lt;input type="checkbox"&gt;
  </code></pre>
  
  <p>However, if I modify the css, appending the <code>+ label</code>, and append a label to the markup, as discussed in the solution, it works:</p>
  
  <pre><code>input[type=checkbox] {
      opacity: 0;
  }
  
  input[type=checkbox] + label {
      height: 17px;
      width: 17px;
      background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat;
  }
  
  input[type=checkbox]:checked + label  {
      background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat;
      height: 17px;
      width: 17px;
      padding: 0 0 0 0px;
  }
  
  &lt;input type="checkbox"&gt;&lt;label&gt;&lt;/label&gt;
  </code></pre>
  
  <p>This renders as expected.</p>
  
  <p>Why does the first solution not work?</p>
  
  <p>How can I acheive this without having to add labels that aren't required?</p>