JSFiddle - React, Tailwind, and code Playground

by viphalongpro

HTML

<input id="Text1" type="text" style="width:150px" tabindex="1" />    
	<input id="Text2" type="text" style="width:150px" tabindex="2" />
	<label class="myCheckbox" tabindex="3" contenteditable='true'>
		<input type="checkbox" name="test"/>
		<span></span>
	</label>
	<input id="Button1" type="button" value="button" style="width:150px" tabindex="4" />

CSS

.myCheckbox input {
	display: none;
}
.myCheckbox span {
    width: 20px;
	height: 20px;
    display: block;
	background: gray;           
    box-sizing:border-box;
}
.myCheckbox input:checked + span {
	background: url("http://i.stack.imgur.com/UfplA.png") no-repeat center gray;
}
.myCheckbox {
     /*outline:none;*/
     display:inline-block;   
     font-size:0;
}

.myCheckbox:focus > span {
     /*border:2px dotted green; */
}

JavaScript

$('.myCheckbox').keydown(function(e){      
    if(e.keyCode == 13 || e.keyCode == 32){
       $('span', this).click();        
    }
    if(e.keyCode != 9) return false;
});