JSFiddle - React, Tailwind, and code Playground

Custom Checkbox

by Jennifer Perrin

HTML

<input type="checkbox" checked="checked" />
<input type="checkbox" />
<br /><br /><br />
<input type="checkbox" id="ex" /><label for="ex">Checkbox</label>

CSS

body {padding:50px;}

.checkbox {
  display:inline-block;
  vertical-align:middle;
  width:20px;
  line-height:20px;
  text-align:center;
  background-color:#aaa;
  color:transparent;
  overflow:hidden;
  text-decoration:none;
  border:2px solid #333;
  margin:0px 10px 0px 0px;
}

.checked {color:white;background-color:#226C9C;}

label {cursor:pointer;}

JavaScript

$(':checkbox').each(function() {
    if ($(this).is(":checked")) {
        $(this).before('<a href="#" class="checkbox checked">&#10004;</a>');
    } else {
        $(this).before('<a href="#" class="checkbox">&#10004;</a>');
    }
}).click(function() {
    if ($(this).is(":checked")) {
        $(this).prev().addClass('checked');
    } else {
        $(this).prev().removeClass('checked');
    }
}).hide();

$('a.checkbox').click(function() {
    if ($(this).next().is(":checked")) {
        $(this).removeClass('checked').next().removeAttr('checked');
    } else {
        $(this).addClass('checked').next().attr('checked', 'true');
    }
    return false;
});