Вы можете сделать это с чистым css3, используя псевдокласс :checked. Вдохновленный этой статьей , я получил следующее решение:
Особенности:
- только CSS
- нет
id атрибут необходим
- Z-индекс не требуется
Попробуйте это на 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;
}
Некоторые объяснения:
Элемент i необходим для добавления псевдоэлемента :before со значком в качестве содержимого. Элементы input являются пустыми тегами и не могут иметь псевдоэлементов, таких как :before и :after, поэтому нам нужен дополнительный элемент. Вы также можете использовать span или div, но i короче.
label необходим для запуска input. Если вы оберните input элементом label, вам не понадобятся атрибуты id и for для связи.
'\ 2718' и '\ 2713' - это коды символов UTF8 для "голосования X" и "галочки".
Вместо content вы также можете установить background-image или что угодно.
Работает во всех современных браузерах и ie9 +.