JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<body>
	<h1>Customized Checkbox</h1>
	<form>
		<div class="inputCheckOuter">
        	<div class="inputCheckInner"></div><input type="checkbox"><label>Hi</label>
        </div><!--inputCheckOuter-->
    </form>
</body>

CSS

form{width:500px;margin:auto;}
	.inputCheckInner{background: url("http://i103.photobucket.com/albums/m156/imghost099/grey_zps08380150.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); /*overflow: hidden;*/ width: 3.8%; height:20px; width:20px; position:absolute;}
	.inputCheckInner input { width: 42.5px;}
	.checked1{background-position:-40px 0;}
	.inputCheckOuter{ position:relative;}
input {visibility: hidden;}

label {
    margin-left: 1%;
}

JavaScript

$(document).ready(function(){ 
	$(".inputCheckInner").click(function(){
		
	$(".inputCheckInner").toggleClass( "checked1" );
	
	$( "input[type='checkbox']" ).prop( "checked" , !$( "input[type='checkbox']" ).prop( "checked" ) );
	
	//$( this ).siblings('input[type="checkbox"]').prop( "checked" , !$( this )
			//.siblings('input[type="checkbox"]').prop( "checked" ) );
	});
	});