CSS Radio and Checkbox
CSS only No images
<div class="_radio">
<div class="_radio">
<input type="radio" name="id" id="id_0" value="x">
<label for="id_0"><mark></mark> It’s awesome - where would I be without it</label>
</div>
<div class="_radio">
<input type="radio" name="id" id="id_1" value="y">
<label for="id_1"><mark></mark> No</label>
</div>
<div class="_radio">
<input type="radio" name="id" id="id_2" value="z">
<label for="id_2"><mark></mark> Maybe</label>
</div>
<div class="_checkbox">
<input type="checkbox" name="like" id="like" value="like" checked>
<label for="like"><mark></mark> Yes</label>
</div>
._radio { padding:5px; margin-left:40px; }
._radio { padding:5px; margin-left:40px; }
._radio input[type="radio"] { opacity: 0; position: absolute; }
._radio input[type="radio"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
._radio input[type="radio"]:checked + label > mark:before { content:' '; background:#009df5; width:10px; height:10px; display:inline-block; margin:10px; border-radius:5px;}
._radio input[type="radio"] + label > mark { display:inline-block; width:30px; height:30px; vertical-align:middle; border-radius:15px; border:1px solid #ccc; background:#fff; text-indent: 0; }
._checkbox { padding:5px; margin-left:40px; }
._checkbox input[type="checkbox"] { opacity: 0; position: absolute; }
._checkbox input[type="checkbox"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
._checkbox input[type="checkbox"] + label > mark { position:relative; display:inline-block; width:30px; height:30px; vertical-align:middle; border-radius:5px; border:1px solid #ccc; background:#fff; text-indent: 0; }
._checkbox input[type="checkbox"]:checked + label > mark:before { content:' '; background:#009df5; width:3px; height:3px; position:absolute; top:13px; left:11px; transform: rotate(45deg); transform: rotate(45deg); }
._checkbox input[type="checkbox"]:checked + label > mark:after { content:' '; background:#009df5; width:3px; height:9px; position:absolute; top:10px; left:15px; transform: rotate(45deg); transform: rotate(45deg); }