<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
input[type="radio"] {
display: none;
}
input[type="radio"]+i:before {
content: '\2718';
color: red;
}
input[type="radio"]:checked+i:before {
content: '\2713';
color: green;
}
/* only to get the list vertical */
.vertical-group>label {
display: block
}
</style>
</head>
<body>
<div class="vertical-group">
<label>
<input type="radio" name="rg" /><i></i> option 1
</label>
<label> <input type="radio" checked name="rg" /><i></i>option 2
</label>
<label> <input type="radio" name="rg" /><i></i> option 3
</label>
</div>
</body>
</html>
【radio】
