<label class="container">1
  <input type="radio" name="radio" id="1" checked>
  <span class="checkmark"></span>
</label>
<label class="container">2
  <input type="radio" name="radio" id="2">
  <span class="checkmark"></span>
</label>
<label class="container">3
  <input type="radio" name="radio" id="3">
  <span class="checkmark"></span>
</label>
.container{
  display: inline-block;
  position:relative;
  cursor:pointer;
  font-size:30px;
  user-select: none;
  padding-left:40px;
  margin-bottom:10px;
}
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark{
  position:absolute;
  top:0;
  left:0;
  width:30px;
  height:30px;
  background:#eee;
  border-radius:50%;
}
.container:hover .checkmark{
  background:#ccc;
}
.checkmark:after{
  content:"";
  position:absolute;
  display:none;
}
.container .checkmark:after{
  top:50%;
  left:50%;
  width: 15px;
  height: 15px;
  border-radius:50%;
  border: solid 3px white;
  transform:translate(-50%,-50%) rotate(45deg);
}
.container input:checked ~ .checkmark{
  background:#2196F3;
}
.container input:checked ~ .checkmark:after{
  display:block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.