[HTML][CSS][SASS] Custom select, checkbox, radio example with pure CSS | Live demo: https://www.damianwajer.com/blog/custom-styled-form-controls/

checkbox.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("../images/checkbox-checked.png");
    }
  }
}

example.html

<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>

radio.scss

// 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: url("../images/radio-checked.png");
    }
  }
}

select.scss

// Select
.select-custom {
  position: relative;
  display: block;
  background-color: #fff;

  &__select {
    position: relative;
    z-index: 20;
    padding: 5px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    
    &::-ms-expand {
      display: none;
    }
    
    &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
    
    &:focus {
      box-shadow: 0 0 8px rgba(#66afe9, 0.6);
    }
  }

  &__caret {
    position: absolute;
    top: 50%;
    right: 15px;
    z-index: 10;
    margin-top: -8px;
    color: #8e9496;
  }
}