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

01/31/2020 - 17:21
MatBole (not verified)

Proscar Caida Pelo Propecia http://buycialisuss.com - generic cialis from india Fedex Shipping Amoxicilina Website Express Delivery Aberdeenshire cialis price Canada Prednisone

01/31/2020 - 17:22
MatBole (not verified)

Proscar Caida Pelo Propecia http://buycialisuss.com - generic cialis from india Fedex Shipping Amoxicilina Website Express Delivery Aberdeenshire cialis price Canada Prednisone

02/08/2020 - 02:12
MatBole (not verified)

Doxycycline Acutane http://abuycialisb.com - canadian pharmacy cialis 20mg Kamagra Oral Jelly Australia canadian pharmacy cialis 20mg Viagra Online Farmacia

02/08/2020 - 02:13
MatBole (not verified)

Doxycycline Acutane http://abuycialisb.com - canadian pharmacy cialis 20mg Kamagra Oral Jelly Australia canadian pharmacy cialis 20mg Viagra Online Farmacia

Add new comment