Advanced Search

checkbox & radio custom style

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

Expand | Embed | Plain Text

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.