JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

input {
    vertical-align:middle;
}
.myCheckbox input {
     display: none;
}
.myCheckbox span {
     width: 100%;
     height: 100%;
     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 {
    width:20px;
    height:20px;
    padding:0;
    border:none;
    outline:none;
    vertical-align:middle;
}
.myCheckbox:focus {
    border:1px solid orange;
}

JavaScript

$('.myCheckbox').click(function(){
    $('input',this).click();
});