CSS Radio Button

by Jens Kühn

HTML

<i class="radiobutton"></i>
<br/>
<i class="radiobutton active"></i>

SCSS

i.radiobutton {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid gray;
  border-radius: 50%;
  &.active {
    border-color: blue;
    &::before {
      position: absolute;
      content: ' ';
      display: block;
      width: 10px;
      height: 10px;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      background-color: blue;
      border-radius: 50%;
    }
  }
}