About design and nearby

Customize Checkboxes with CSS3

Posted: July 5th, 2013 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

Sometimes working on the project I feel a lack of customization of form elements, the more if everything is to fit the overall style of website or app. This case the very solution is to use my own images for checkboxes.

I found the way to realize that with the ‘:checked’ pseudo selector – for targeting an element based on its checked or unchecked status.

The HTML:

  1. <input type="checkbox" />
  2. <label>Check box 1</label>

To tie together input tag and label tag, I need to add ‘for’ for label and relevant ‘id’ for input:

  1. <input id="Checkbox1" class="css-checkbox" type="checkbox" />
  2. <label class="css-label" for="Checkbox1">Check box 1</label>

When you click the label it will check the checkbox. The result is:



The magic CSS:

  1. input[type=checkbox].css-checkbox {
  2. display:none; /* to hide the checkbox itself */
  3. }
  4. input[type=checkbox].css-checkbox + label.css-label {
  5. padding-left:20px;
  6. height:24px;
  7. display:inline-block;
  8. background-repeat:no-repeat; /* setting the background properties */
  9. background-position: 0 0;
  10. vertical-align:middle;
  11. cursor:pointer;
  12. }
  13. .css-label {
  14. background-image: url('../images/icon_checkbox.png');
  15. padding-right: 5px;
  16. }

And to make it work we need to set what to do if the input is checked:

  1. input[type=checkbox].css-checkbox:checked + label.css-label {
  2. background-position: 026px;
  3. }

Note: As always, there is no luck with ie7 – ie8, so for these browsers I show the ‘native’ look and feel through the conditional comments:

  1. input[type=checkbox].css-checkbox {
  2. display:block;
  3. float:left;
  4. }
  5. .css-label { background-image:none;}
  6. input[type=checkbox].css-checkbox + label.css-label {
  7. padding-left:0px;
  8. }

Finally, my code is
(view live example: click here):

  1. label {
  2. display: block;
  3. white-space: nowrap;  
  4. padding-top:3px;
  5. }
  6. label span {
  7. font-weight: normal;
  8. font-size: 13px;
  9. color: #444;
  10. }
  11. input[type=checkbox].css-checkbox {
  12. display:none;
  13. }
  14. input[type=checkbox].css-checkbox + label.css-label {
  15. padding-left:20px;
  16. height:24px;
  17. display:inline-block;
  18. background-repeat:no-repeat;
  19. background-position: 0 0;
  20. vertical-align:middle;
  21. cursor:pointer;
  22. }    
  23. .css-label {
  24. background-image: url('../images/icon_checkbox.png');
  25. padding-right: 5px;
  26. }
  27. input[type=checkbox].css-checkbox:checked + label.css-label {
  28. background-position: 026px;
  29. }
  30. .css-label span {
  31. padding-left:5px;
  32. }

For ie7 & ie8:

  1. input[type=checkbox].css-checkbox {
  2. display:block;
  3. float:left;
  4. }
  5. .css-label { background-image:none;}
  6. input[type=checkbox].css-checkbox + label.css-label { padding-left:0px;}
  1. <ul class="search_section">
  2.         <li class="left">
  3.                <input id="Checkbox1" class="css-checkbox" type="checkbox" />
  4.                <label for="Checkbox1" name="lbl_Checkbox1" class="css-label"><span>Check box 1</span></label>                                      
  5.          </li>
  6.          <li class="left">
  7.                <input id="Checkbox2" class="css-checkbox" type="checkbox" />
  8.                <label for="Checkbox2" name="lbl_Checkbox2" class="css-label"><span>Check box 2</span></label>                                      
  9.          </li>
  10.          <li class="left">
  11.                <input id="Checkbox3" class="css-checkbox" type="checkbox" />
  12.                <label for="Checkbox3" name="lbl_Checkbox3" class="css-label"><span>Check box 3</span></label>                                      
  13.          </li>
  14. </ul>
Share Button

Check Related Posts:


Leave a Reply


  • eight − 6 =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now