Custom checkbox design using CSS only

This code snippet is about creating a custom checkbox design using CSS only.

HTML Code

<div class="field-wrap">
    <h3>Custom checkboxes</h3>
    <label class="custom-checkbox">
        <input type="checkbox" name="choice1"> 
        Custom checkbox choice 1
    </label>
    <label class="custom-checkbox">
        <input type="checkbox" name="choice2"> 
        Custom checkbox choice 2
    </label>
    <label class="custom-checkbox">
        <input type="checkbox" name="choice3"> 
        Custom checkbox choice 3
    </label>
</div>

CSS Code

.custom-checkbox{
  display:flex;
  align-items:center;
  cursor:pointer;
  margin-bottom:10px;
}
.custom-checkbox input{
  margin-right:10px;
  width:15px;
  height:15px;
  outline:2px solid #2d2d2d;
  border:2px solid #fff;
  appearance:none;
  -webkit-appearance:none;
  transition:all .3s ease;
}
.custom-checkbox input:checked{
  background-color:#d72900
}