JSFiddle - React, Tailwind, and code Playground

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">
		<input type="checkbox" name="test" tabindex="4" />
		<span></span>
	</label>
	<input id="Button1" type="button" value="button" style="width:150px" tabindex="5" />

CSS

.myCheckbox input {
			display: none;
		}

		.myCheckbox span {
			width: 20px;
			height: 20px;
			display: block;
			background: gray;
		}

		.myCheckbox input:checked + span {
			background: url("http://i.stack.imgur.com/UfplA.png") no-repeat;
		}

		.myCheckbox input:focus{
			border: 1px dotted rgba(0, 0, 0, 0.25);
		}