Benutzerdefinierte Radio-Buttons

#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 bezieht sich nicht auf ein bestimmtes Element, es ist rein dazu da, um Browser daran zu hindern, die späteren Selektoren zu implementieren, wenn sie das nicht verstehen (da die meisten Browser den gesamten Selektor verwerfen, wenn ein Teil davon fehlschlägt).