CSS: Custom checkbox style with image
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):
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:
|
1 2 3 |
<div>Check me!</div> <input id="trigger" type="checkbox"> <label for="trigger" class="checker"></label> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#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:
Do you know other methods to style checkbox in CSS? Share your ideas in comments below 🙂
