JSFiddle - React, Tailwind, and code Playground

HTML

<input class="edit-hours" name="staff.Locked" type="checkbox" ng-model="staff.Locked" id="editHours" ng-show="!isSharedLink && selectedProject.Project.IsDraft" />

CSS

.edit-hours[type="checkbox"]:before{
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid transparent;
    content: "";
    background: white;
    background-image: url('http://i.imgur.com/JOEqZaH.png');
    background-repeat: no-repeat;
    background-position:center;
    cursor:pointer;
}

div.jtable-main-container > table.jtable > tbody > tr:hover .edit-hours[type="checkbox"]:before {
    background-color:#f3f3f3;
}

.edit-hours[type="checkbox"]:after{
    top: -18px;
}
.edit-hours[type="checkbox"]:checked:after{
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid transparent;
    content: "";
    background: white;
    background-image: url('http://i.imgur.com/nJyPSJr.png');
    background-repeat: no-repeat;
    background-position:center;
    cursor:pointer;
}

div.jtable-main-container > table.jtable > tbody > tr:hover .edit-hours[type="checkbox"]:checked:after {
    background-color:#f3f3f3;
}