Posted By

glauberportella on 06/18/14


Tagged

input checkbox custom


Versions (?)

Custom checkbox design


 / Published in: HTML
 

Put a nice checkbox customized input in your html forms.

  1. IMAGE IN: http://s29.postimg.org/40ztnp9ab/checkbox.png
  2.  
  3. CSS:
  4.  
  5. /** COPY IN YOUR CSS **/
  6. .checkbox {
  7. background: transparent url('../images/checkbox.png') no-repeat;
  8. background-position: 0 0;
  9. width: 28px;
  10. height: 24px;
  11. display: inline-block;
  12. cursor: pointer;
  13. }
  14.  
  15. .checkbox.checked {
  16. background-position: 0 -24px;
  17. }
  18.  
  19. .checkbox.red {
  20. background-position: 0 -48px;
  21. }
  22.  
  23. .checkbox.red.checked {
  24. background-position: 0 -72px;
  25. }
  26. /** END COPY IN YOUR CSS **/
  27.  
  28. HTML:
  29.  
  30. <!-- INPUT HTML MARKUP -->
  31. <input style="display:none" type="checkbox" name="custom_checkbox" id="custom_checkbox" value="1" checked="checked">
  32. <span id="custom_checkbox_design" class="checkbox checked" style="float: left; padding-left: 5px"></span>
  33. <!-- END INPUT HTML MARKUP -->

Report this snippet  

You need to login to post a comment.