JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input id="cb1" type="checkbox"><label for="cb1">1</label><br>
  <input id="cb2" type="checkbox"><label for="cb2">2</label><br>
  <input id="cb3" type="checkbox"><label for="cb3">3</label><br>
  <input id="cb4" type="checkbox"><label for="cb4">4</label><br>
  <input id="cb5" type="checkbox"><label for="cb5">5</label><br>
  <input id="cb6" type="checkbox"><label for="cb6">6</label><br>
  <input id="cb7" type="checkbox"><label for="cb7">7</label><br>
  <input id="cb8" type="checkbox"><label for="cb8">8</label><br>
  <input id="cb9" type="checkbox"><label for="cb9">9</label>
</div>

CSS

.cb {
  display: none;
}

.cb-box {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.cb + label::before {
  content: '\0000a0';
  margin-right: 0px;
}

.cb:checked + label::before {
  content: '\2714';
  margin-left: -12px;
  margin-right: 6px;
  font-size: 12px;
}

JavaScript

$.fn.cbColor = function(color) {
	color = color || '#f00';
  
	this
  .addClass('cb')
  .before('<div class="cb-box" style="background:' + color + ';"></div>');
  
  return this;
};

// Apply color to existing checkboxes
$(':checkbox').cbColor('#fd0');

$('#container').append('<br>');

// Apply color for dynamic elements
var $newCb = $('<input id="custom"type="checkbox">'),
$newCb2 = $('<input id="custom2"type="checkbox">');

$newCb
.appendTo('#container')
.after('<label for="custom">custom</label><br>')
.cbColor('#fdf');

$newCb2
.appendTo('#container')
.after('<label for="custom2">custom2</label><br>')
.cbColor('#f00');