<input type="checkbox" name="ch" id="ch">
<label for="ch"></label>
label {
display: block;
width: 20px;
height: 20px;
background: #fff;
border:2px solid red;
border-radius: 50%;
position: relative;
cursor: pointer;
}
label:after {
content: '';
display: block;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: 5px;
display: none;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:checked~label:after {
display: block;
}
jsbin
