CSS: How to style checkbox after label?

I have this HTML that I can't change:

<label for="accept">I accept.</label>
<input id="accept" type="checkbox">

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:

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;
}

However, in this case, when I try:

    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;
    }

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.

How do I go about doing this without using JavaScript?