<form>
  <h1>Can We Style HTML Radio Buttons?</h1>
  <ul>
    <li>
      <input type="radio" value="yes" name="option" id="yes" />
      <label for="yes">Yes</label>
    </li>
    <li>
      <input type="radio" value="no" name="option" id="no" />
      <label for="no">No</label>
    </li>
    <li>
      <input type="radio" value="maybe" name="option" id="maybe" />
      <label for="maybe">Maybe</label>
    </li>
  </ul>
</form>

body {
  font-family: Arial, sans-serif;
  padding: 1.5em;
}

h1 {
  margin: 0 0 0.25em;  
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0.5em 0;  
}

input[type="radio"] {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

label {
  color: #999;
  display: inline-flex;
  align-items: center;
}

label::before {
  content: '';
  display: block;
  height: 1.25em;
  width: 1.25em;
  border: solid 1px #ccc;
  border-radius: 50%;
  margin-right: 0.5em;
  transition: border ease-in 150ms, box-shadow ease-in 150ms;
}

input[type="radio"]:checked + label,
input[type="radio"]:focus + label {
  color: black;
}

input[type="radio"]:checked + label::before {
  background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%);
  box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75);
  border-color: currentColor;
}

input[type="radio"]:focus + label::before {
  box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75);
  border-color: currentColor;
}