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.

IsaacHubbard (not verified)

These days people are suffering through this hair fall problem too much. Your eminent ultius essay reviews skills actually inspired me a lot. I liked this post and keep sharing more about hair problems.

Add new comment