<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 {
  position: relative;
  margin: 0.5rem 0;

  input {
    // to prevent "jumps"
    position: fixed;
    top: 0;
    left: 0;

    // visually hidden
    clip: rect(0 0 0 0);
    clip-path: inset(100%);

    &:checked ~ label::before {
      background-color: $muted-red;
      box-shadow: inset 0 0px 0 3px #fff;
    }

    &:focus ~ label::before {
      /* tricky moment :( */
      box-shadow: inset 0 0px 0 3px #fff, 0 0px 8px $muted-red;
    }
  }

  label {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;

    &::before {
      content: "";
      position: relative;
      flex-shrink: 0;
      border-radius: 50%;
      border: 1px solid #6f686a;
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }
}