Posted By

JimSangwine on 05/05/11


Tagged


Versions (?)

Custom Radio Buttons


 / Published in: CSS
 

  1. #foo:checked::before,
  2. input[type="checkbox"] {
  3. position:absolute;
  4. clip: rect(0,0,0,0);
  5. clip: rect(0 0 0 0);
  6. }
  7.  
  8. #foo:checked,
  9. input[type="checkbox"] + label::before {
  10. content: url('checkbox.png');
  11. }
  12.  
  13. input[type="checkbox"]:checked + label::before {
  14. content: url('checkbox-checked.png');
  15. }
  16.  
  17. /*
  18. #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).
  19. */

Report this snippet  

You need to login to post a comment.