自定义单选按钮

#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没有引用任何特定的元素，它只是在阻止浏览器在不理解的情况下实现后来的选择器（因为大多数浏览器会在选择器的任何部分失败时删除整个选择器）。

翻译自: https://css-tricks.com/snippets/css/custom-radio-buttons/