Custom CSS Checkboxes

custom-css-checkbox.scss

.checkbox {
  label {
    display: block;
    position: relative;
    float: right;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
      &:checked~div {
        background-color: $color-navy;
        &:before,
        &:after {
          display: block;
        }
      }
    }

    div.fauxcheck {
      position: absolute;
      top: 0;
      left: 0;
      height: 26px;
      width: 26px;
      border: 2px solid #dbdbdb;

      &:before,
      &:after {
        content: "";
        position: absolute;
        display: none;
        top: 10px;
        left: 3px;
      }

      &:before {
        width: 15px;
        height: 2px;
        background: #eee;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }

      &:after {
        width: 15px;
        height: 2px;
        background: #eee;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    } // div

    // &:hover input~div {
    //   background: none;
    //   // background-color: $color-navy;
    // }
  } // label
} // .checkbox

required-markup.html

<div class="checkbox">
  <label for="toggle-1">
    <input type="checkbox" id="toggle-1">
    <div class="fauxcheck"></div>
  </label>
</div>