JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<form action="" method="">

	<input type="checkbox" id="check-1" name="checkbox-btns-sprite">
	<label for="check-1" class="check"><span></span></label>

	<input type="checkbox" id="check-2" name="checkbox-btns-sprite">
	<label for="check-2" class="check"><span></span></label>

	<input type="checkbox" id="check-3" name="checkbox-btns-sprite">
	<label for="check-3" class="check"><span></span></label>
</form>

CSS

/**************************************/
/* Checkboxes sprite background image */
/**************************************/

input[type=checkbox]{display:none;}

input[type=checkbox] + label.check:hover{    
background-position: 0 bottom;}
  
 
input[type=checkbox] + label.check{
    display:inline-block;
    cursor: pointer;  
    outline: 0;  
    width: 40px;
    height: 40px;
	background-image: url(https://psdtowp.net/images/resources/checkbox.png);
    background-repeat: no-repeat;	
    background-position: 0 0;    
    margin-right: 25px;
    text-align: center;
    font-weight: bold;
}

input[type=checkbox] + label.check span{vertical-align: -60px;}
 
input[type=checkbox]:checked + label.check{background-position: 0 bottom;}