index.html

<input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" />
<label for="checkboxG4" class="css-label">Option 1</label>

lJbAD.markdown

lJbAD

A Pen by Secret Sam on CodePen.

License.

style.css

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

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:26px;
	height:20px; 
	display:inline-block;
	line-height:20px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:20px;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -20px;
}
label.css-label {
/* background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_6dce3c68194b6c6b57e37d2a1ff89063.png); */
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAoCAYAAAAR87HlAAABeklEQVRIie3WzyvDYRzA8beN/Wjza8uPyYqi8V3KxUXK/AFOUv4KucjNYUUOXNZkFzcXLUfFhZIk5EeL/PhKm2EHLPWNMd9xezL7ttWSpO/n9Dyfz/O8+nwuT09JMpn84IfD8NOgjuqojuqojuqojv5PdC4WYehwhXBCzsqXFgsGokeEYhEArl6eGKxvEbWiOg3FIgIEaLM5suqa6HVKIYP2F2s+fkwgeiT2rbYqpjzd+dGJy10G9pcZPtngWX3Pqi3cnjJzdSD2zdYKgpIPl9mWH11KyChqmrWHa0ZPN3nNqAAs3p0zebknzrktdma9PtwWe840OWh/bbNYrz/GGb/YJpyQ8cs7Iu8y2whKPpqsFTkgQMn3/+lbRmXsbIvV+6jmhRqTlZC3j3a7Q7Ou2anJYGTK002fszHnsKPMQlDy5QU1UQCzwci0p4ee6gaRqyw1EZB66Sh35gVBY/yvoahp/PIONymFkaZOuirrCoIF0WLj7z0ov4p+Ar+qcgr8pf8mAAAAAElFTkSuQmCC');

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}