You can do this with pure css3 using the :checked pseudo- :checked . Inspired by this article , I got the following solution:
Features:
- only css
- no
id attribute required - no z-index required
Try it on jsfiddle: http://jsfiddle.net/tlindig/n6by8/6/
HTML:
<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>
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; }
Some explanations:
The i element is required to add the :before pseudo-element with the icon as content. The input elements are empty tags and cannot have pseudo-elements like :before and :after , so we need an additional element. You can also use span or div , but i shorter.
label required to run input . If you wrap the input label element, you do not need the id and for attributes to combine.
'\ 2718' and '\ 2713' are UTF8 character codes for "vote X" and "mark".
Instead of content you can also set background-image or whatever you like.
It works in all modern browsers and ie9 +.