JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span></label>

CSS

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url("http://i.imgur.com/IOOvHvs.png") right top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url("http://i.imgur.com/kCDiXCU.png") right top no-repeat;
}

input{
    float: right;
}

JavaScript

$("body").append('<input type="checkbox" id="c2" name="cc" /><label for="c2"><span></span></label>'); // checking with dynamic elements