Creating Custom Checkboxes and Radio Buttons with Just CSS!

input-radio-checkbox.scss

$base-color: #CCC;
$base-alpha: 0.5;
$dark-base-color: darken($base-color, 20%);
$light-base-color: lighten($base-color, 30%);
$input-size: 20px;
$background-color: lighten($base-color, 10%);
$background-color-hover: darken($base-color, 10%);
$background-color-checked: $base-color;
$border-color: lighten($dark-base-color, 5%);
$border-color-hover: darken($dark-base-color, 5%);
$border-color-checked: $dark-base-color;
$checked-icon-color: darken($base-color, 40%);
$checked-icon-size: 14px;
$border-radius-radio: 50%;
$border-radius-checkbox: 3px;
$box-shadow: 0 1px 2px rgba($dark-base-color, $base-alpha),
  inset 0 -15px 10px -12px rgba($dark-base-color, $base-alpha);
$box-shadow-active: 0 1px 2px rgba($dark-base-color, $base-alpha),
  inset 0 1px 3px rgba($dark-base-color, $base-alpha);
$box-shadow-radio: inset 0 0 10px rgba(darken($dark-base-color,50%), $base-alpha);
input[type="radio"],
input[type="checkbox"] {
  display: none;
  + label {
    position: relative;
    display: inline;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    &::before {
      position: relative;
      display: inline-block;
      width: $input-size;
      height: $input-size;
      margin-right: 5px;
      content: "";
      vertical-align: bottom;
      border: 1px solid $border-color;
      background-color: $background-color;
      box-shadow: $box-shadow;
    }
    &:hover::before {
      border-color: $border-color-hover;
      background-color: $background-color-hover;
      box-shadow: $box-shadow;
    }
    &:active::before {
      box-shadow: $box-shadow-active;
    }
  }
  &:disabled + label {
    cursor: default;
    opacity: 0.5;
    &:hover::before {
      border-color: $border-color;
      background-color: $background-color;
      box-shadow: $box-shadow;
    }
  }
  &:checked + label::before {
    border-color: $border-color-checked;
    background-color: $background-color-checked;
  }
}

input[type="radio"] {
  + label::before {
    border-radius: $border-radius-radio;
  }
  &:checked + label::after {
    position: absolute;
    top: 1px;
    left: 3px;
    width: $checked-icon-size;
    height: $checked-icon-size;
    content: " ";
    border-radius: $border-radius-radio;
    background: $checked-icon-color;
    box-shadow: $box-shadow-radio;
  }
}

input[type="checkbox"] {
  + label::before {
    border-radius: $border-radius-checkbox;
  }
  &:checked + label::after {
    font-size: $checked-icon-size;
    font-family: "Arial";
    line-height: 1.2em;
    position: absolute;
    top: 0;
    left: 5px;
    content: "\2714";
    color: $checked-icon-color;
  }
}