CSS3 Checkboxes/Radios

by Mr_Vasu

HTML

<div class="content">
      <h3>Easy CSS3 Checkboxes and Radio Buttons</h3>
      <p>
        <input id="c1" type="checkbox" name="cc">
        <label for="c1">Checkbox 1</label>
      </p>
      <p>
        <input id="c2" type="checkbox" name="cc">
        <label for="c2">Checkbox 2</label>
      </p>
      <p>
        <input id="r1" type="radio" name="rb">
        <label for="r1">Radio Button 1</label>
      </p>
      <p>
        <input id="r2" type="radio" name="rb">
        <label for="r2">Radio Button 2</label>
      </p>
</div>

CSS

*,*:after,*:before{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
body{
  background:#f2f2f2 !important;
  border:0 !important;
  color:#000 !important;
  font:14px/1.5em sans-serif !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;
  text-align:justify !important;
  vertical-align:baseline !important;
  width:100% !important;
  word-wrap:break-word !important;
  z-index:0 !important;
}
.content{
  background:#404040;
  border-radius:5px;
  box-shadow:0 10px 10px -5px rgba(0,0,0,.5);
  color:#f2f2f2;
  height:250px;
  left:50%;
  margin:50px -150px;
  padding:10px;
  position:relative;
  width:300px;
}
h3{
  font:bold 14px/1.5em sans-serif;
  margin:0;
  padding:0;
  letter-spacing:.25em;
  text-align:center;
  text-shadow:0 2px 2px rgba(0,0,0,.75);
}
p{
  margin:1.5em 0;
  padding:0;
  text-align:justify;
}
input[type="checkbox"],input[type="radio"]{
  vertical-align:middle;
}
input[type="checkbox"]+label,input[type="radio"]+label{
  cursor:pointer;
}
input[type="checkbox"]+label:before,input[type="radio"]+label:before{
  content:"";
  display:inline-block;
  height:19px;
  margin:1px 4px 0 -22px;
  vertical-align:middle;
  width:19px;
}
input[type="checkbox"]+label:before{
  background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png)left top no-repeat;
}
input[type="checkbox"]:checked+label:before{
  background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png)-19px top no-repeat;
}
input[type="radio"]+label:before{
  background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png)-38px top no-repeat;
}
input[type="radio"]:checked+label:before{
  background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png)-57px top no-repeat;
}
p.external{
  background:#000;
  border-radius:5px;
  color:#fff;
  margin:0 auto;
 ...