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!

Add new comment