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

11/15/2018 - 12:11
rick (not verified)

Through this post, I know that your good knowledge in playing with all the pieces was very helpful. I notify that this is the first place where I find issues I've been searching for. You have a clever yet attractive way of writing. Webdesigner website

11/19/2018 - 10:49
rick (not verified)

Thanks for the nice blog. It was very useful for me. I'm happy I found this blog. Thank you for sharing with us,I too always learn something new from your post. SEO Services Edmonton

11/20/2018 - 12:39
Anonymous (not verified)

I must say that overall I am really impressed with this blog. It is easy to see that you are passionate about your writing. If only I had your writing ability I look forward to more updates and will be returning. Jason

12/04/2018 - 12:49
jakdown (not verified)

The web site is lovingly serviced and saved as much as date. So it should be, thanks for sharing this with us. fleet services Calgary

12/04/2018 - 18:27
rick (not verified)

Just admiring your work and wondering how you managed this blog so well. It’s so remarkable that I can't afford to not go through this valuable information whenever I surf the internet! Hr consultants

12/05/2018 - 16:35
Anonymous (not verified)

I ‘d mention that most of us visitors are really endowed to exist in a fabulous place with very many wonderful individuals with very helpful things. jason

12/06/2018 - 15:52
Anonymous (not verified)

I'm going to read this. I'll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article flower delivery calgary

12/07/2018 - 22:12
Anonymous (not verified)

I was very impressed by this post, this site has always been pleasant news Thank you very much for such an interesting post, and I meet them more often then I visited this site. suomikasino

12/08/2018 - 09:29
Anonymous (not verified)

Truly, a magnificent art is making an article. And you are quite a master at that art. I would tell you to keep on continuing this awesome work of yours lol coaching

12/09/2018 - 14:37
Anonymous (not verified)

That's what makes you the best. You should keep publishing more articles and you will Such Become One of the best writers ever my lifestyle

12/12/2018 - 08:01
Max Todd (not verified)

If you see that your kids are spending too much time gaming, take it away from them. You should always tell them to take a break and then take it away. Go for a walk with him, or engage in a different activity to distract him from video gaming. https://hackeroffice.com/

12/17/2018 - 13:27
Anonymous (not verified)

I wish to show thanks to you just for bailing me out of this particular trouble.As a result of checking through the the net and meeting techniques that were not productive, I was thinking my life was done. voyance telephone

Add new comment