Пользовательские кнопки радиосвязи онлайн урок.




#foo:checked::before,
input[type="checkbox"]
{
position:absolute;
clip: rect(0,0,0,0);
clip: rect(0 0 0 0);
}

#foo:checked,
input[type="checkbox"] + label::before
{
content: url('checkbox.png');
}

input[type="checkbox"]:checked + label::before {
content: url('checkbox-checked.png');
}

#foo не ссылается на какой-либо конкретный элемент, он просто предотвращает использование браузерами последующих селекторов, если он этого не понимает (так как большинство браузеров будут удалять весь селектор, если какая-либо его часть не удастся).