Hello Readers

We are all familiar with Checkbox and Custom Checkbox too, In this blog I am Explaining about Custom checkbox having images, Images are used in checkbox to make them look more interactive and appealing. We must have surely noticed a thing about images that it will add beauty to any web page. When you click on an image it will look like it is a clickable event, But here I write pure CSS which makes checkboxes more attractive.

Html Source Code

<div style="margin-top:10px;">
	<input type="checkbox" class="cust-checkbox" id="1">
	<label class="cust-checkboxLabel" for="1">
		<img src="img/1.png">
	</label>

	<input type="checkbox" class="cust-checkbox" id="2">
	<label class="cust-checkboxLabel" for="2">
		<img src="img/1.png">
	</label>
</div>

 Css Source Code:

.cust-checkbox,.cust-checkboxLabel{
background-color: #e8e8e8;
border-radius: 4px;
cursor: pointer;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle; }

.cust-checkbox{opacity: 0;position: absolute;left: -99999}

.cust-checkboxLabel{padding-right: 46px;position: relative;}

.cust-checkbox + .cust-checkboxLabel::before{background-image: url(img/twitter-xl.png);  
background-position: center center;
background-repeat: no-repeat;
background-size: 28px auto;
content: "";
height: 48px;
position: absolute;
right: 0;
width: 46px;}

.cust-checkbox:checked + .cust-checkboxLabel::before{background-image: url(img/images.png); background-color: #fff;}

 Definitely try this! Or you can download the zip file from the below link.