Custom Radio Buttons

0
0
#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 doesn’t reference any particular element, it’s there purely to prevent browsers from implementing the later selectors if it doesn’t understand that (since most browsers will drop the entire selector if any part of it fails).

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.