Styled radio buttons that are accessible and dont rely upon another library fiddle

Radio buttons that can be custom styled

by Max Poshusta

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<label>
  <input type="radio" name="radioExample">
  <span aria-label="Try using tab and space">Try using tab, then the arrow keys <a href="https://stackoverflow.com/a/14322755/4826740" target="_blank">(the default for radio buttons)</a></span>
</label>

<br>

<label>
  <input type="radio" name="radioExample" checked disabled>
  <span aria-label="Disabled selected radio button">Disabled selected radio button (loses focus after you select something else)</span>
</label>

<br>

<label>
  <input type="radio" name="radioExample" disabled>
  <span aria-label="Disabled radio button">Disabled radio button</span>
</label>
<br>

<label>
  <input type="radio" name="radioExample">
  <span aria-label="Normal radio button">Normal radio button</span>
</label>

<br>

<label>
  <input type="radio" name="radioExample">
  <span aria-label="Another normal radio button">Another normal radio button</span>
</label>

<br>
<br>

<a href="https://jsfiddle.net/maxshuty/2cs0dj54/" target="_blank">Want checkboxes that don't rely upon a 3rd party library too?</a>

<br>
<br>

<a href="http://jsfiddle.net/maxshuty/qxakwcy3/" target="_blank">Are you already using FontAwesome, Glyphicons, etc.? Check this out!</a>

<br>
<br>

<a href="https://stackoverflow.com/a/32876109/4826740" target="_blank">Courtesy of this answer</a>

CSS

input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Text color for the label */
input[type="radio"]+span {
  cursor: pointer;
  font: 16px sans-serif;
  color: black;
}

/* Radio button not selected style */
input[type="radio"]+span:before {
  content: '';
  border: 1px solid #359600;
  border-radius: 50%;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: -2px;
}

/* Selected radio button style */
input[type="radio"]:checked+span:before {
  border-radius: 50%;
  background-color: white;
  border: 6px solid #359600;
}

/* Adding a dotted border around the active tabbed-into radio button */
input[type="radio"]:focus+span:before,
input[type="radio"]:not(:disabled)+span:hover:before {
  /* Visible in the full-color space.
     Want a cool hover effect that gives the appearance of 
     two borders? Stack the box-shadows! */
  box-shadow:
    0px 0px 0px 1px white,
    0px 0px 0px 2px #359600;

  /* Visible in Windows high-contrast themes
     box-shadow will be hidden in these modes and
     transparency will not be hidden in high-contrast
     thus box-shadow will not show but the outline will
     providing accessibility */
  outline-color: transparent;
  outline-width: 2px;
  outline-style: dotted;
  }
  


/* Disabled radio button styles */
input[type="radio"]:disabled+span {
  cursor: default;
  opacity: 0.5;
}


/* Styles specific to this fiddle that you do not need */
body {
  padding: 1em;
}
h1 {
  font-size: 18px;
}

JavaScript

// From my answer here: https://stackoverflow.com/a/58570835/4826740

// With help courtesy of this answer:
// https://stackoverflow.com/a/32876109/4826740