Advanced Search

Custom checkbox design

/ Published in: HTML
Save to your folder(s)
Put a nice checkbox customized input in your html forms.

Expand | Embed | Plain Text

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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.