JSFiddle - React, Tailwind, and code Playground

by yuckey2d

HTML

<form id="conditions-form">
    <ul>
    <li>
        <input id="condition3" type="checkbox" name="conditions[condition3]"></input>
        <label class="checkbox" for="condition3">Conditions 3</label>
    </li>
</ul>
</form>

CSS

body { background: black; }
#conditions-form { color: white; }
#conditions-form input[type=checkbox] {
    display:inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance:none;
	appearance: none;
    width:19px;
    height:19px;
    background: url('http://demo.carillonclinic.com.php54-1.ord1-1.websitetestlink.com/wp-content/themes/carillonclinic/images/care-plan-checkbox.gif') no-repeat top left;
    cursor:pointer;
}
#conditions-form input[type=checkbox]:checked {
    background:url('http://demo.carillonclinic.com.php54-1.ord1-1.websitetestlink.com/wp-content/themes/carillonclinic/images/care-plan-checkbox-checked.gif') no-repeat top left;
}