JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <form action="" id="gf-form">
            <div class="checkBox">
                <input type="checkbox" id="checkbox1" />
                <label for="checkbox1">Unchecked Checkbox</label>
            </div>
            <div class="checkBox">
                <input type="checkbox" id="checkbox2" checked="checked" />
                <label for="checkbox2" >Checked Checkbox</label>
            </div>
            <div class="checkBox">
                <input type="checkbox" id="checkbox3" disabled="disabled"/>
                <label for="checkbox3">Disabled Unchecked Checkbox</label>
            </div>
            <div class="checkBox">
                <input type="checkbox" id="checkbox4" disabled="disabled" checked="checked"/>
                <label for="checkbox4">Disabled Checkbox</label>
            </div>    
        </form>
    </div>

CSS

/*-------------------------*\
Demo3
\*-------------------------*/
#gf-form label {
    font: normal normal 11px/13px Arial, Sans-serif;
  color: #000;
  cursor: pointer;
}

#gf-form label,
#gf-form input[type="checkbox"] + label::before {
    vertical-align: middle;
}

#gf-form input[type="checkbox"] {
    border: 0 none !important;
    clip: rect(1px,1px,1px,1px);
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    width: 1px !important;
}
#gf-form input[type="checkbox"] + label::before {
    content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  line-height: 13px;
  margin: 0 8px 0 0;
  background: url("http://www.w3cplus.com/sites/default/files/201202/sprite-radio-checkbox.png") no-repeat 0 0;
  vertical-align: middle;
}

/* disabled checkbox*/
#gf-form input[type="checkbox"]:disabled + label{
    opacity: .5;
    cursor: default; /* or cursor: no-drop */
}

/* hover checkbox (unselected state only) */
#gf-form input[type="checkbox"]:not(:checked):hover + label::before{
    background-position: 0 -13px;
}

/* selected checkbox */
#gf-form input[type="checkbox"]:checked + label::before{
    background-position: 0 -26px;
}