How to Create Different Styles for input[type=checkbox]?

This response does an excellent job of showing you how to style checkboxes on a page: Checkboxes not working

…albeit input[type=checkbox] applies its styling on all checkboxes.

I’d like to incorporate images for two different checkboxes – we’ll say facebook and twitter respectively. As a result I’ll need to style them independently because they both have different images and also different images when clicked upon.

With the code below it works perfectly fine for the first checkbox.

Style:

 input[type=checkbox] {
 display:none;
 }

 input[type=checkbox] + label
 {
  background-image:url(facebook_active.png);
 height: 53px;
 width: 77px;
 display:inline-block;
 padding: 0 0 0 0px;
 }
 input[type=checkbox]:checked + label
 {
 background-image:url(facebook_inactive.png);
 height: 53px;
 width: 77px;
 display:inline-block;
 padding: 0 0 0 0px;
 }

Checkboxes:

 <input type='checkbox' name='facebook'  id="facebook"><label for="facebook"></label> 

 <input type='checkbox' name='twitter' id="twitter"><label for="twitter"></label> 

My question is how can I style the second checkbox (Twitter) just like I did for the Facebook checkbox. Is there a way to be specific on individual ones so that I can style them independently?