<ul class="radio-group">
  <li>
  <input id="choice-a" type="radio" name="g" />
  <label for='choice-a'>
  <span><span></span></span>
  Choice A
  </label>
  </li>
  <li>
  <input id="choice-b" type="radio" name="g" />
  <label for='choice-b'>
  <span><span></span></span>
  Choice B
  </label>
  </li>
  <li>
  <input id="choice-c" type="radio" name="g" />
  <label for='choice-c'>
  <span><span></span></span>
  Choice C
  </label>
  </li>
  <li>
  <input id="choice-d" type="radio" name="g" />
  <label for='choice-d'>
  <span><span></span></span>
  Choice D
  </label>
  </li>
</ul>  

ul.radio-group li {
  position: relative;
  list-style: none;
  padding: 10px;
}

input[type="radio"] {
  opacity: 0;
  position: absolute;
}

/* Matches the direct descendant of a label preceded by a  
  radio button */
input[type="radio"] + label > span {
  position: relative;
  border-radius: 12px;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border: 1px solid #bcbcbc;
  margin: 0 1em 0 0;
  display: inline-block;
  vertical-align: middle;
}

/* Matches a span contained by the direct descendant  
  of a label preceded by a checked radio button */
input[type="radio"]:checked + label > span span {
  display: inline-block;
  width: 6px;
  height: 6px;
  position: absolute;
  left: 4px;
  top: 4px;
  border-radius: 4px;
  border: none;
  background: #96d6df;
}