JSFiddle - React, Tailwind, and code Playground
HTML
<input type="checkbox" />Hello
CSS
input[type="checkbox"], input[type="radio"] {
position: absolute;
}
input[type="checkbox"], input[type="radio"] {
-moz-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
position:absolute;
width:20px;
height:20px;
margin:0;
padding:0;
border:0;
}
input[type="checkbox"] + span::before, input[type="radio"] + span::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background-repeat: no-repeat;
}
input[type="checkbox"] + span::before, input[type="radio"] + span::before {
background:url(http://qjqcg.qdxwd.servertrust.com/v/vspfiles/templates/eastcoasttvs/images/Checkbox.gif);
}
input[type="checkbox"]:checked + span::before, input[type="radio"]:checked + span::before {
background-position: 0 20px;
}
JavaScript
$(document).ready(function(){
$('input[type="checkbox"], input[type="radio"]').after("<span />");
});