checkbox & radio custom style


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.