Custom Style for Checkboxes

by Matthew Day

HTML

<div class="container">
  <input id="ana" type="checkbox" value="ana" />
  <label for="ana">Ana</label>
  <input id="beatrice" type="checkbox" value="beatrice" />
  <label for="beatrice">Beatrice</label>
  <input id="carlos" type="checkbox" value="carlos" />
  <label for="carlos">Carlos</label>
  <input id="david" type="checkbox" value="david" />
  <label for="david">David</label>
  <input id="eunice" type="checkbox" value="eunice" />
  <label for="eunice">Eunice</label>
</div>

CSS

* {
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

label {
  display: block;
  margin-left: 36px;
  position: relative
}

label:after {
  border: 1px solid gray;
  content: '';
  font-size: 1.2rem;
  height: 20px;
  left: -28px;
  position: absolute;
  text-align: center;
  top: -3px;
  width: 20px;
}

input[type="checkbox"] {
  visibility: hidden;
}

input[type="checkbox"]:checked + label:after {
  background: navy;
  color: white;
  content: '\00d7';
}

JavaScript

// SOURCES
// https://codepen.io/bbodine1/pen/novBm
// http://codersblock.com/blog/checkbox-trickery-with-css/
// https://brajeshwar.github.io/entities/