Checkbox Customize CSS

idea is make to customize css for checkbox.

by Aqeel Malik

HTML

<!--
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
-->
<input id="box" class="checkbox" type="checkbox" />
 <label for="box" class="label"></label>Purple Checkbox

CSS

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
input[type=checkbox] {visibility:hidden;}
.checkbox + .label{
  width:65px;
  height:65px;
  margin-right:15px;
  display:inline-block;
  vertical-align:middle;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  cursor:pointer;
}
.checkbox:checked + .label{
  background-position:0 -66px;
}
.label {
  background:url(http://gdurl.com/561n) no-repeat;
}

JavaScript

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/