<div class="row radio">
  <input id="sex-male" type="radio" name="sex" value="male" checked="checked" />
  <label for="sex-male">Male</label>
</div>

<div class="row radio">
  <input id="sex-female" type="radio" name="sex" value="female" />
  <label for="sex-female">Female</label>
</div>

<div class="row radio">
  <input id="sex-other" type="radio" name="sex" value="others" />
  <label for="sex-other">Other</label>
</div>

label {
  font-size: 20px;
  line-height: 26px;
}

.radio input[type="radio"] + label {
  color: grey;
  position: relative;
}

.radio input[type="radio"] + label::before {
  /* Outer Circle of radio button */
  border: 1px solid grey;
  content: ' ';
  display: inline-block;
  margin-right: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  transition: border 0.15s ease-in-out;
}

.radio input[type="radio"] + label::after {
  /* Inner Circle of radio button */
  border: 0px solid orange;
  content: ' ';
  background: transparent;
  display: inline-block;
  margin-right: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  top: 3px;
  transition: border 0.15s ease-in-out;
}

input[type="radio"] {
  display: none;
}

/* When button is active */
.radio input[type="radio"]:checked + label::after {
  background: orange;
}

.radio input[type="radio"]:checked + label::before {
  border-color: orange;
}

.radio input[type="radio"]:checked + label {
  color: orange;
}