Custom radio button controls

by jorgeluis

HTML

<div>
   <label class="control control--radio">
       <input type="radio" name="radio" />
       <span>Radio number one</span>
    </label>
</div>
<div>
   <label class="control control--radio">
       <input type="radio" name="radio" checked="checked" />
       <span>Radio number two</span>
    </label>
</div>

CSS

.control {
  font-size: 18px;
  position: relative;
  display: block;
  height: 1em;
  margin-bottom: 1em;
  padding-left: 2em;
  cursor: pointer;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control span {
  display: block;
  position: absolute;
}

.control--radio span::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -1.5em;
  width: 1em;
  height: 1em;
  background: #e6e6e6;
  border-radius: 50%;
}

.control :checked ~ span::after {
  background: #2aa1c0;
}

.control--radio span::after {
  content: "";
  position: absolute;
  display: none;
  top: 0.3625em;
  left: -1.25em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #fff;
}

.control--radio input:checked ~ span::after {
  display: block;
}