custom radio buttons, css

simples way to set custom radio button style. without javascript, z-index or id for every button.

HTML

<div class="vertical-group">
<label>
    <input type="radio" name="rg"/><i></i>
    option 1
</label>
<label>
    <input type="radio" checked="checked" name="rg" /><i></i>
    option 2
</label>
<label>
    <input type="radio" name="rg" /><i></i>
    option 3
</label>
</div>

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;
}