HTML form radio and checkbox style

form_style.scss

input {
  &+ label {
    line-height: 1.2em;
  }

  /* Checkboxes */
  &[type="checkbox"] {
    display: none;

    &:checked + label:before {
      content: "\f00c";
    }
  }

  &[type="radio"] {
    display: none;

    &+ label:before {
      border-radius: 8px;
    }

    &:checked + label:before {
      content: "\2022";
      font-size: 31px;
      text-align: center;
      line-height: 0.5em;
    }
  }

  &+ label:before {
     border: 1px solid #b9b9b9;
     background: #fff;
     content: "\00a0";
     display: inline-block;
     font: 12px FontAwesome, sans-serif;
     height: 16px;
     margin: 0 5px 0 0;
     padding: 0;
     vertical-align: top;
     width: 16px;
   }

  &:checked + label:before {
    background: #fff;
    color: #797979;
    text-align: center;
  }

  &[readonly] + label:before,
  &:disabled + label:before {
    background: #e2e2e2 !important;
    color: #a9a9a9 !important;
  }

}