Posted By

melomano on 11/17/11


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

spee66
danfolt


checkbox & radio custom style


 / Published in: CSS
 

  1. div {position: relative;}
  2.  
  3. div > input {
  4. height: 16px;
  5. width: 16px;
  6. position: absolute;
  7. left: 0;
  8. opacity: 0;
  9. }
  10.  
  11. div > label {
  12. line-height: 16px;
  13. padding: 0 0 0 18px;
  14. font-size:15px;
  15. }
  16.  
  17. input + label {
  18. background: url(../img/gr_custom-inputs.png) 0 -1px no-repeat;
  19. height: 16px;
  20. }
  21.  
  22. input[type=radio] + label { background-position: 0 -161px; }
  23.  
  24. /* Checked styles */
  25. input[type=radio]:checked + label { background-position: 0 -241px; }
  26. input[type=checkbox]:checked + label { background-position: 0 -81px; }
  27.  
  28. /* Disabled styles */
  29. input[type=radio]:disabled + label { background-position: 0 -221px; }
  30. input[type=checkbox]:disabled + label { background-position: 0 -61px; }
  31.  
  32. /* Disabled and Checked styles */
  33. input[type=radio]:disabled:checked + label { background-position: 0 -301px; }
  34. input[type=checkbox]:disabled:checked + label { background-position: 0 -141px; }
  35.  
  36.  
  37. <div><input type="radio" value="male" id="male" name="gender" /> <label for="male">Male</label></div>

Report this snippet  

You need to login to post a comment.