Checkboxes w/Images

Use an image in the UI to check or uncheck an option.

by Matthew Day

HTML

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

CSS

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

.inputcontainer {
  display: inline-block;
  margin: 0 36px;
  position: relative;
}

label {
  display: block;
  left: 0;
  position: absolute;
  text-align: center;
  top: 80px;
  width: 80px;  /* must match width of image on :before */
}

label:before {
  background: url('http://lorempixel.com/400/300/people/1/');
  /* background-position: center center; */
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 60px;
  left: 0;
  position: absolute;
  top: -70px;
  width: 80px;
}
label:after {
  color: gray;
  content: '';
  font-size: 3.4rem;
  height: 60px;
  left: 0;
  position: absolute;
  top: -70px;
  width: 80px;
}

label[for="beatrice"]:before {
  background: url('http://lorempixel.com/400/300/people/6/');
  background-size: contain;
}

label[for="carlos"]:before {
  background: url('http://lorempixel.com/400/300/people/3/');
  background-size: contain;
}

label[for="david"]:before {
  background: url('http://lorempixel.com/400/300/people/8/');
  background-size: contain;
}

label[for="eunice"]:before {
  background: url('http://lorempixel.com/400/300/people/9/');
  background-size: contain;
}

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

input[type="checkbox"]:checked + label:after {
  background: rgba(230,230,250,0.8);
  content: '\00d7'
}

JavaScript

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