Css radio custom

	<label for="beom" class="box">
      <input type="radio" name="gender"  id="beom" checked="checked">
      <span class="on"></span>
      	beom
    </label>
    <label for="beom1" class="box">
      <input type="radio" name="gender"  id="beom1">
      <span class="on"></span>
      beom
    </label>

.box {padding:10px; margin:10px; font-size: 20px; position:relative; padding-left:50px; font-size: 30px; }
.box input {display: none; }
.on {position:absolute;  left:0; top:50%; transform: translateY(-50%); width:30px; height:30px; border:3px solid skyblue; border-radius: 50%;}


.on::after {
  content:''; position: absolute; left:50%; top:50%;
  display: none;
   transform: translate(-50%,-50%); width:15px; height:15px; background-color: skyblue;
  border-radius: 50%;
}


.box input[type='radio']:checked + .on {
  background-color: none;
}
.box input[type='radio']:checked + .on::after {
  display: block;
}