JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

This one works with a replacement:<br />
<input type='checkbox' name='thing1' value='valuable' id="thing1"/>
<label for="thing1"></label>
Thing 1

<hr />

This one doe, too (Algolia Layout):<br />
<label class="ais-RefinementList-label">
    <input type="checkbox" class="ais-RefinementList-checkbox" value="Stroke">
    <span class="ais-RefinementList-labelText">Thing 2</span> 
</label>

CSS

input[type=checkbox] {
  display: none;
}
 
input[type=checkbox] + label,
input[type=checkbox] + span
{
  display:inline-block;
  padding-left: 20px;
  position: relative;
}
input[type=checkbox] + label:before,
input[type=checkbox] + span:before
{
  content:"";
  background: #999;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0;
  position: absolute;
  left:0 ;
  top: 2px;
}
input[type=checkbox]:checked + label:before,
input[type=checkbox]:checked + span:before
{
  content: "\f00c";
  font-family: 'FontAwesome';
   background: blue;
   color:#fff;
   font-size: 14px;
}