<fieldset style="margin-top:2rem; width: 400px; margin-left:1rem;">
  <legend>What is your favorite wild animal?</legend>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="elephant">
    <label for="elephant">Elephant</label>
  </div>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="monkey">
    <label for="monkey">Monkey</label>
  </div>
   <div class="radio-wrapper">
    <input type="radio" name="animal" id="cheetah">
    <label for="cheetah">Cheetah</label>
  </div>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="giraffe">
    <label for="giraffe">Giraffe</label>
  </div>
</fieldset>

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

$muted-red: #db3846;

* {
  font-family: 'Roboto', sans-serif;
}

fieldset {
  border: none;
}

.radio-wrapper {
  margin: 0.5rem 0;
}

input[type="radio"] {
  opacity: 0;
  
  + label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    
    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      left: -24px;
      border-radius: 50%;
      border: 1px solid #6F686A;
      width: 18px;
      height: 18px;
    }
    
    &::after {
      content: '';
      position: absolute;
      display: inline-block;
      left: -20px;
      top: 4px;
      border-radius: 50%;
      width: 12px;
      height: 12px;
    }
  }
  
  &:checked {
    + label::after {
      background: $muted-red;
    }
  }
  
  &:focus {
    + label::before {
      box-shadow: 0 0px 8px $muted-red;
    }
  }
}