JSFiddle - React, Tailwind, and code Playground
HTML
<input type="checkbox" id="checkbox"/>
<div>
<label for="checkbox"></label>
</div>
CSS
input {
margin: 20px;
}
div {
border: 1px solid #888;
float: left;
padding: 1px;
margin: 20px;
}
input[type=checkbox]:checked ~ div label{
background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
background-size: 100%;
}
label {
background: #ddd;
height: 20px;
width: 20px;
display: block;
/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
/* Opera */
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #C7C7C7));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top left, #FFFFFF 0%, #C7C7C7 100%);
}
label:hover {/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
/* Opera */
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #8FECFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top left, #FFFFFF 0%, #8FECFF 100%);}