JSFiddle - React, Tailwind, and code Playground

by mdmoura

HTML

<h4>No styling.</h4>
<div>
  <label for="accept3">Accept</label>
  <input id="accept3" type="checkbox">
</div>

<h4>
  Not working and label and input in same line.
</h4>
<form>
  <label for="accept2">Accept</label>
  <input id="accept2" type="checkbox">
</form>

<h4>
  Working but label and input in same line.
  Needed to place input before label to make it work.
</h4>
<form>
  <input id="accept1" type="checkbox">
  <label for="accept1">Accept</label>
</form>

CSS

form input[type="checkbox"] {
  opacity: 0;
}

form label {
  position: relative;
  display: block;
  padding-left: 22px;
}

form label::before, form label::after {
  position: absolute;
  content: "";
  display: block;
}

form label::before{
  height: 16px;
  width: 16px;
  border: 1px solid;
  left: 0px;
  top: 3px;
}

form label::after {
  height: 5px;
  width: 9px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
  left: 4px;
  top: 7px;
}

form input[type="checkbox"] + label::after {
  content: none;
}

form input[type="checkbox"]:checked + label::after {
  content: "";
}

form input[type="checkbox"]:focus + label::before {
  outline: rgb(59, 153, 252) auto 5px;
}

div label {
  display: block;
}

h4 { margin: 12px 0; }