自定义单选按钮

#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 不引用任何特定元素，它纯粹是为了防止浏览器在不理解该规则的情况下实施后面的选择器（因为大多数浏览器会在选择器中的任何部分失败时丢弃整个选择器）。