CSS: Custom checkbox style with image

Piotr Elmanowski | Published: 22 Feb, 2017

As everyone knows, it is impossible to style input checkbox in CSS. But there is very easy workaround for that, of course, without JavaScript. You must create input checkbox with id attribute and label with for attribute (for must point on input’s ID). You need two images for your new styled checkbox. One image is for unchecked and second for checked state. I created in Inkscape in few seconds 2 images like below, and I placed them on one image (CSS sprite):

Custom checkbox style with image

Then only you must do 2 easy css tricks. One is to place correctly above image as background (see on css rule for .checker) and to use “+” is css selector for input and label. Remember that input checkbox must be just before label!

HTML:

<div>Check me!</div>
<input id="trigger" type="checkbox">
<label for="trigger" class="checker"></label>

<div>Check me!</div>

CSS:

#trigger {
  display: none;
}
.checker {
  background-image: url(assets/checkboxes.png);
  background-position: left center;
  background-size: auto 100%;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
}
#trigger:checked + .checker {
  background-position: right center;
}

#trigger {

display: none;

}

.checker {

background-image: url(assets/checkboxes.png);

background-position: left center;

background-size: auto 100%;

width: 40px;

height: 40px;

background-repeat: no-repeat;

}

#trigger:checked + .checker {

background-position: right center;

}

Results:

Check me!

Do you know other methods to style checkbox in CSS? Share your ideas in comments below 🙂