<div class="content">
  <fieldset>
    <legend>Please choose your favourite snack:</legend>
    <div class="radio-wrapper">
      <input id="cookie" type="radio" name="snack" value="cookie"/>
      <label for="cookie">Cookies 🍪</label><br>
    </div>
    <div class="radio-wrapper">
      <input id="apple" type="radio" name="snack" value="apple">
      <label for="apple">Apple 🍏</label><br>
    </div>
    <div class="radio-wrapper">
      <input id="pretzels" type="radio" name="snack" value="pretzels">
      <label for="pretzels">Pretzels 🥨</label>
    </div>  
  </fieldset>
</div>  
$lightGrey: #F2F2F2;
$grey: #6E6E6E;
$white: #FFFFFF;
$blue: #1849AB;

body {
  background-color: $lightGrey;
  display: flex;
  font-family: 'Arial';
  justify-content: center;
  padding: 4rem;
}

.content {
  background-color: $white;
  padding: 2rem;
}

fieldset {
  border: none;
}

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

input[type="radio"] {
  opacity: 0;
  
  + label {
    cursor: pointer;
    position: relative;
    
    &::before {
      border: 1px solid $grey;
      border-radius: 50%;
      content: '';
      height: 18px;
      left: -24px;
      position: absolute;
      top: 0;
      width: 18px;
    }
    
    &::after {
      border-radius: 50%;
      content: '';
      height: 12px;
      left: -20px;
      position: absolute;
      top: 4px;
      width: 12px;  
    }
  }
  
  &:focus {
    + label::before {
      box-shadow: 0 0 0 2px rgba(21, 156, 228, 0.7);
    }
  }
  
  &:checked {
    + label::after {
      background: $blue;
    }
  }
 
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.