Code
Checkbox
HTML
<input type="checkbox" name="c_gender" id="c_male" value="male" checked><label for="c_male">Male</label><br>
<input type="checkbox" name="c_gender" id="c_female" value="female"><label for="c_female">Female</label><br>
<input type="checkbox" name="c_gender" id="c_other" value="other" checked><label for="c_other">Other</label><br>
Radio
HTML
<input type="radio" name="r_gender" id="r_male" value="male"><label for="r_male">Male</label><br>
<input type="radio" name="r_gender" id="r_female" value="female"><label for="r_female">Female</label><br>
<input type="radio" name="r_gender" id="r_other" value="other" checked><label for="r_other">Other</label>
CSS
<style type="text/css">
label{
display:inline-block;
background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='16'><rect rx ='4' x='4' y='4' width='24' height='8' style='fill:rgb(90,90,90)'/><circle cx='8' cy='8' r='7' stroke-width='0' fill='rgb(90,90,90)' fill-opacity='.8'/></svg>");
background-repeat:no-repeat;
padding-left:40px;
margin-bottom:15px;
line-height:16px;
color:rgb(90,90,90);
cursor:pointer;
}
input[type=radio]:checked + label{
cursor:default;
}
input[type=checkbox],input[type=radio]{
display:none
}
input:checked + label{
color:rgb(0,102,255);
background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='16'><rect rx ='4' x='4' y='4' width='24' height='8' style='fill:rgb(90,90,90)'/><circle cx='24' cy='8' r='7' stroke='rgb(0,102,255)' stroke-width='1' fill='rgb(0,102,255)' fill-opacity='.7'/></svg>");
}
</style>