<fieldset>
  <legend>Pretty Radio Buttons</legend>
  <label>
    <input type="radio" name="radio-button" value="css" checked />
    <span>CSS-only fully stylable radio button</span>
  </label>
  <label>
    <input type="radio" name="radio-button" value="no" />
    <span>No icons or unnecessary DOM</span>
  </label>
</fieldset>

/* pretty radio */
label > input[type="radio"] {
  display: none;
}
label > input[type="radio"] + *::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.1rem;
  border-color: gray;
}
label > input[type="radio"]:checked + * {
  color: teal;
}
label > input[type="radio"]:checked + *::before {
  background: radial-gradient(teal 0%, teal 40%, transparent 50%, transparent);
  border-color: teal;
}

/* basic layout */
fieldset {
  margin: 20px;
  max-width: 400px;
}
label > input[type="radio"] + * {
  display: inline-block;
  padding: 0.5rem 1rem;
}