Custom select, checkbox, radio example with pure CSS

https://www.damianwajer.com/blog/custom-styled-form-controls/

by Damian Wajer

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div style="padding: 10px;">
  <p>
    <label class="select-custom">
      <select name="select" class="select-custom__select">
        <option value="">Select an option</option>
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
        <option value="option-3">Option 3</option>
      </select>
      <i class="select-custom__caret fa fa-caret-down"></i>
    </label>
  </p>

  <p>
    <label>
      <input name="checkbox" type="checkbox" value="on" class="checkbox-custom">
      <i class="checkbox-custom__icon-state"></i>
      Checkbox
    </label>
  </p>

  <p>
    <label>
      <input name="radio" type="radio" value="1" class="radio-custom">
      <i class="radio-custom__icon-state"></i>
      Radio
    </label>
    <label>
      <input name="radio" type="radio" value="1" class="radio-custom">
      <i class="radio-custom__icon-state"></i>
      Radio
    </label>
  </p>
</div>

SCSS

// Checkbox
.checkbox-custom {
  position: absolute;
  opacity: 0;

  &__icon-state {
    display: inline-block;
    margin-right: 5px;
    padding: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #e7e6e6;
    background-color: #fff;
    vertical-align: middle;
  }
  
  &:focus {
    & + .checkbox-custom__icon-state {
      box-shadow: 0 0 8px rgba(#66afe9, 0.6);
    }
  }

  &:checked {
    & + .checkbox-custom__icon-state {
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO3N0cm9rZTojMDAwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MnB4O308L3N0eWxlPjwvZGVmcz48dGl0bGUvPjxnIGlkPSJjaGVja21hcmsiPjxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9IjMiIHgyPSIxMiIgeTE9IjE2IiB5Mj0iMjUiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIxMiIgeDI9IjI5IiB5MT0iMjUiIHkyPSI3Ii8+PC9nPjwvc3ZnPg==");
    }
  }
}

// Radio
.radio-custom {
  position: absolute;
  opacity: 0;

  &__icon-state {
    display: inline-block;
    margin-right: 5px;
    padding: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #e7e6e6;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff;
    vertical-align: middle;
  }
  
  &:focus {
    & + .radio-custom__icon-state {
      box-shadow: 0 0 8px rgba(#66afe9, 0.6);
    }
  }

  &:checked {
    & + .radio-custom__icon-state {
      background-image:...