<div class="container">

  <div class="radio">

    <input id="radio-1" name="radio" type="radio" checked>

    <label for="radio-1" class="radio-label">Checked</label>

  </div>

​

  <div class="radio">

    <input id="radio-2" name="radio" type="radio">

    <label  for="radio-2" class="radio-label">Unchecked</label>

  </div>

​

  <div class="radio">

    <input id="radio-3" name="radio" type="radio" disabled>

    <label for="radio-3" class="radio-label">Disabled</label>

  </div>

</div>

body {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  min-height: 100vh;

}

​

.radio {

  margin: 0.5rem;

}

.radio input[type="radio"] {

  position: absolute;

  opacity: 0;

}

.radio input[type="radio"] + .radio-label:before {

  content: '';

  background: #f4f4f4;

  border-radius: 100%;

  border: 1px solid #b4b4b4;

  display: inline-block;

  width: 1.4em;

  height: 1.4em;

  position: relative;

  top: -0.2em;

  margin-right: 1em;

  vertical-align: top;

  cursor: pointer;

  text-align: center;

  -webkit-transition: all 250ms ease;

  transition: all 250ms ease;

}

.radio input[type="radio"]:checked + .radio-label:before {

  background-color: #3197EE;

  box-shadow: inset 0 0 0 4px #f4f4f4;

}

.radio input[type="radio"]:focus + .radio-label:before {

  outline: none;

  border-color: #3197EE;

}

.radio input[type="radio"]:disabled + .radio-label:before {

  box-shadow: inset 0 0 0 4px #f4f4f4;

  border-color: #b4b4b4;

  background: #b4b4b4;

}

.radio input[type="radio"] + .radio-label:empty:before {

  margin-right: 0;

}