Cacher is the code snippet organizer for pro developers

/* 
 * actually the whole thing relies on JS. So it should be implemented with caution.
 * Make sure you have a class/id which gets applied when the browser supports JS (like cssua.org or
 * modernizr) and append it to your custom styling. It must make sure that it has a fallback to the default 
 * styles without breaking the layout.
 */

body {background: #111;}

.wrapper {width: 600px; margin: auto;}

.description p {color: #CCC;}

/* the div is only styled for demo purpose */
div .field-wrap {
  width: 295px;
  height: 40px;
  padding: 0 5px 0 0;
  margin: 10px 0;
  float: left;
}

/* the input is styles only for demo purpose */
input[type=checkbox] {
  float: right;
}

/* feel free to style the label element however you want. Make sure styling get only applied if the browser supports js.*/
label {
  width: 220px !important;
	height: 40px;
	padding: 0 0 0 50px;
	vertical-align: middle;
	text-align: left;
	line-height: 44px;
	font-size: 14px;
  color: #CCC;
	cursor: pointer;
	float: left;
	display: block;
	background-color: #222;
	background-repeat: no-repeat;
	background-position: 8px 4px;
	opacity: 0.7;
	
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	-o-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-webkit-transition: all .1s linear;
	transition: all .1s linear;
}

.checked {color: #333; background-color: #F90 !important; opacity: 1;}

  $('label').each(function() {
  	var labelClass = $(this).prev('input').attr('id');
		$(this).addClass(labelClass);
		
		if($(this).prev('input').is(':checked')) {
					
			$(this).addClass('checked');
			
			$(this).toggle(function() {
				$(this).removeClass('checked');
				$(this).prev('input').attr('checked', false);
			}, function(){
				$(this).addClass('checked');
				$(this).prev('input').attr('checked', true);
			});
			
		} else {

			$(this).removeClass('checked');
			
			$(this).toggle(function() {
				$(this).addClass('checked');
				$(this).prev('input').attr('checked', true);
			}, function(){
				$(this).removeClass('checked');
				$(this).prev('input').attr('checked', false);
			});
			
		}
				
	});

<div class="wrapper">
  <div class="description">
    <p>the basic layout consist of a "input" (checkbox) and a "label". The "div" isn't mandatory, rather its only for demo purpose</p>
    <br />
    <p>the checkboxes are only visible for demo purposes and can be hidden.</p>
  </div>
  
  <div class="field-wrap">
    <input type="checkbox" id="checkbox-photos" />
    <label>Photos</label>
  </div>
  <div class="field-wrap">
    <input type="checkbox" id="checkbox-music" />
    <label>Music</label>
  </div>
  <div class="field-wrap">
    <input type="checkbox" id="checkbox-video" />
    <label>Video</label>
  </div>
  <div class="field-wrap">
    <input type="checkbox" id="checkbox-photos" />
    <label>Photos</label>
  </div>
  <div class="field-wrap">
    <input type="checkbox" id="checkbox-music" />
    <label>Music</label>
  </div>
  <div class="field-wrap">
    <input type="checkbox" id="checkbox-video" />
    <label>Video</label>
  </div>
</div>