<div>
  <h1>Pure CSS Fancy Checkbox/Radio</h1>
  
  <h2>Radio Buttons</h2>
  <div class="group">
    <input type="radio" name="rb" id="rb1" />
    <label for="rb1">Check this</label>
    <input type="radio" name="rb" id="rb2" />
    <label for="rb2">... or this...</label>
    <input type="radio" name="rb" id="rb3" />
    <label for="rb3">or maybe this</label>
  </div>
  
  <h2>Checkbox</h2>
  <div class="group">
    <input type="checkbox" name="cb" id="cb1" />
    <label for="cb1">Check this</label>
    <input type="checkbox" name="cb" id="cb2" />
    <label for="cb2">... and this...</label>
    <input type="checkbox" name="cb" id="cb3" />
    <label for="cb3">and maybe this</label>
  </div>

</div>
$clouds: #ecf0f1;
$midnight: #2c3e50;
$wisteria: #8e44ad;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: $wisteria;
  color: white;
}
h1 {
  margin: 0 0 1em;
}
.group {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}
input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  margin-right: 1em;
  padding-left: 2em;
  padding-right: 1em;
  line-height: 2;
  cursor: pointer;
  &:before {
    box-sizing: border-box;
    content: " ";
    position: absolute;
    top: 0.3em;
    left: 0;
    display: block;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid white;
    border-radius: .25em;
    z-index: -1;
  }
}
input[type="radio"] + label::before {
  border-radius: 1em;
}
/* Checked */
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
  padding-left: 1em;
  color: $wisteria;
  &:before {
    top: 0;
    width: 100%;
    height: 2em;
    background: white;
  }
}

/* Transition */
label,
label::before {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}
View Compiled
// Pure CSS Checkbox/Radio, Fancy style.

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:400,300,700

External JavaScript

This Pen doesn't use any external JavaScript resources.