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>
</div>
.mycheckbox input[type="checkbox"] {
  display: none;
}
.mycheckbox input[type="checkbox"]+label {
   background: url('images/checkbox-off.png') no-repeat;
  width:20px;
  height: 20px;
}
.mycheckbox input[type="checkbox"]:checked + label {
  background: url('images/checkbox-on.png');
  width: 20px;
  height: 20px;
}
Tags: 
css
×

Hey! Don't miss a new cool stuff!

Comments

05/09/2018 - 09:06
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. https://www.edisoncarservice.com I prefer to browse this post as a result of I met such a lot of new facts concerning it really

05/27/2018 - 01:54
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. https://www.assignmentsolution.co.uk Thanks for great information I was looking for this info for my project.

06/05/2018 - 21:24
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