How to replace a checkbox with an image

Posted by admin on Thu, 04/20/2017 - 09:51

A short note how to replace your checkbox with an image.

<div class="mycheckbox">
    <input type="checkbox" name="useful" id="useful" />
    <label for="useful">It is useful?</label>
.mycheckbox input[type="checkbox"] {
  display: none;
.mycheckbox input[type="checkbox"]+label {
   background: url('images/checkbox-off.png') no-repeat;
  height: 20px;
.mycheckbox input[type="checkbox"]:checked + label {
  background: url('images/checkbox-on.png');
  width: 20px;
  height: 20px;

Hey! Don't miss a new cool stuff!


jimmy (not verified)

Wonderful post. I am a big fan of your site. The job of the writer is to feed reader's interest. Keep it up. This is nice post and provides full information. I prefer to browse this post as a result of I met such a lot of new facts concerning it really

nancystark (not verified)

I am now not sure where you are getting your information, but great topic. I needs to spend a while finding out more or figuring out more. Thanks for great information I was looking for this info for my project.

tony (not verified)

Oh, so this is how I can replace my checkbox with an image. This will come in handy for me and my essaylab colleagues. I won't waste a minute to tell them about this method. They'll surely cherish knowing about this.

Add new comment