title: CSS: How to style checkbox after label?
body: <p>I have this HTML that I can't change:</p>
  
  <pre><code>&lt;label for="accept"&gt;I accept.&lt;/label&gt;
  &lt;input id="accept" type="checkbox"&gt;
  </code></pre>
  
  <p>Now, I have to use the CSS to move the checkbox to the left and style it with a custom image.
  What I usually do in CSS, when input goes before label is to make the label act like the checkbox by and hide the actual input:</p>
  
  <pre><code>input[ type=checkbox ] {
    display:none;
    }
  
  input[ type=checkbox ] + label {
    display:inline-block;
    padding-left: 25px;
    cursor: pointer;
    height: 25px;
    background: url('image.png') 0 -5px no-repeat;
  }
  
  input[ type=checkbox ]:checked + label {
    background: url('image.png') 0 -40px no-repeat;
  }
  </code></pre>
  
  <p>However, in this case, when I try:</p>
  
  <pre><code>    input[ type=checkbox ] {
        display:none;
        }
  
      label + input[ type=checkbox ] {
        display:inline-block;
        padding-left: 25px;
        cursor: pointer;
        height: 25px;
        background: url('image.png') 0 -5px no-repeat;
      }
  
      label + input[ type=checkbox ]:checked {
        background: url('image.png') 0 -40px no-repeat;
      }
  </code></pre>
  
  <p>not only that it doesn't show the background, but it even unhides the checkbox, so I end up with the default checkbox after the label.</p>
  
  <p>How do I go about doing this without using JavaScript?</p>