<fieldset>
  <legend>Not-that-easy checkbox replacement [Pure CSS3]</legend>
  <input type="checkbox" id="check1" checked="checked">
  <label for="check1">Check 1</label>
  <input type="checkbox" id="check2">
  <label for="check2">Check 2</label>
  <input type="checkbox" id="check3">
  <label for="check3">Check 3</label>
</fieldset>
<p><a href="https://codepen.io/juanbrujo/pen/klGgL">The [CSS+JavaScript] version</a></p>
@import url(https://fonts.googleapis.com/css?family=Lily+Script+One);

body {
  font-family: 'Lily Script One', cursive;
  background-color: #c0392b;
  margin: 50px;
}
a {
  color: white;
  text-shadow: #34495e 2px 2px 1px;
}

fieldset {
  border: 2px solid white;
  border-radius: 6px;
}
legend {
  color: #fff;
  text-shadow: #34495e 2px 2px 1px;
  padding: 0 4px;
  font-size: 20px;
  text-align: right;
}
[type="checkbox"] {
  position: absolute;
  left: -9999px;
}
[type="checkbox"] + label:after {
  content: '';
  position: absolute;
}
[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  line-height: 36px;
  font-size: 28px;
  color: #e74c3c;
  text-shadow: #2c3e50 2px 2px 1px;
  transition: color .3s;
}
[type="checkbox"] + label:after {
  width: 30px; 
  height: 30px;
  transition: all .2s;
  top: 0; 
  left: 0;
}
/* OFF */
[type="checkbox"]:not(:checked) + label:after {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQzA0QTQ2Qjg3OTExMUUzOTFGRjk2NUI1NDgzOTNFQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQzA0QTQ2Qzg3OTExMUUzOTFGRjk2NUI1NDgzOTNFQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNDMDRBNDY5ODc5MTExRTM5MUZGOTY1QjU0ODM5M0VBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNDMDRBNDZBODc5MTExRTM5MUZGOTY1QjU0ODM5M0VBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+OlCveQAAAtpJREFUeNpi1DtTyEAJuGjch8w1AWIlIN7GwkAdIAXE/pvfnkm49u0xX7lsIAMTFQw1/vv/36yq+0tLah8sN/v17w8zUIyNhcJgMP3+71dDxu2Zxhe+3BcHiQmycv8CUh9ZKDBU9ee/P0BDZ5hc+PJADCbOzww2+AtWg9lq3/7HZygTExNDj+9ShjvGHxkuMD5A1cvE8g9I/cbp4tPbFuJ18fJXhxkWP16PIf7690cOUIiQFXk3vz1l6H2yCavc7e/PeYGUIskG//7/lwEY+2AaG3j04w0fkJLHGhTCQgI4DZ7zfA/Dze/PMOOFkeVviqTLtRQJl0cYGQQY0zxAKnx93mGG6c92MmRKuaNofvrzHcP8l3sxDBVk4fnRr5x40pBHcRGQuwCI/7EgGeoDTD6ZE55uVlrNfIzh9/O/DBZ8agxAxXAD+p5uYgCqQTFUhIGXYZZa5jFlTomZQO4qmDjj////hUCu3P/hSkzn4/W6z3+954VJmvGqMsxWywSzL399yBBzYyKKoeJsAgy5310YfM2sgoBclCQCijzP5kerCwvvzrdCNhQETn2+zXD2y10wexowaJCBAAs3wwzVdIZje88zoBsKM3g7sNC4lSjhdI2dieUPugKQgde+PWE49ukGXIyVkZmhWymOQYlDnGHP4VPYM5H+2aJ3wBgNypf27lmgnndYjl3kE7KCM5/vMNQ8WIaiqUTWHxxM+AAjcnkMjECPH/9+5eacm+V1mvEeVg0m/xUZ9C6KMixdt4MBGD+wXMqI12Co4Zr//v/rLr+/WHvX+4sKaJH1dY1W6WE+Zs5ioE+vYSnoUcIYBQA1XGdiZMruVorv8hE2uYdQyPi/Xj7sPNDQGTBD8RZU2ASBGh8CqQ0tCpHXrPk0noLEfIGWANlLgHIbicn6OMsKoAHPGRkYy/qVky5a8qk9K5ENuI0tWREVeTgKdB1QWgclS6BlVwhUpnAAEGAAgXQY3GSQUXsAAAAASUVORK5CYII=') left center no-repeat;
}
/* ON */
[type="checkbox"]:checked + label {
  color: #fff;
}
[type="checkbox"]:checked + label:after {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCMjFEMjRCNjg3OTAxMUUzOTFGRjk2NUI1NDgzOTNFQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCMjFEMjRCNzg3OTAxMUUzOTFGRjk2NUI1NDgzOTNFQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkIyMUQyNEI0ODc5MDExRTM5MUZGOTY1QjU0ODM5M0VBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkIyMUQyNEI1ODc5MDExRTM5MUZGOTY1QjU0ODM5M0VBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+zLDZ0QAAAEVJREFUeNpi/P//PwMtABMDjcCowXDAgk3Q1CuepBg9vW0hI1EGQxUTZSjQEaORN2rwqMFUydL4chSxgHG0oB+6BgMEGACpVw4JPGQPRQAAAABJRU5ErkJggg==') left center no-repeat;
}
// This is the not-easy [Pure CSS3].
// The easiest one is here: [CSS+JS] https://codepen.io/juanbrujo/pen/klGgL

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.