помогите поправить скрипт checkbox'a

[djonA]

есть скрипт для изменения дизайна checkbox'a.
Он работает, но при условии если идет вот такая структура:

<input type="checkbox" id="1" class="styled" /><label for="1"> test1</label>

мне надо, что бы была вот такая структура и он работал:

<label for="2"><input type="checkbox" id="2" class="styled" /> test2</label>

помогите подправить сам скрипт.

Вот выкладываю:

<script>
var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: '+selectWidth+"px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>");var Custom={init:function(){var e,t,i,o=document.getElementsByTagName("input"),s=Array();for(a=0;a<o.length;a++)("checkbox"==o[a].type||"radio"==o[a].type)&&o[a].className.indexOf("styled")>-1&&(s[a]=document.createElement("span"),s[a].className=o[a].type,1==o[a].checked&&("checkbox"==o[a].type?(position="0 -"+2*checkboxHeight+"px",s[a].style.backgroundPosition=position):(position="0 -"+2*radioHeight+"px",s[a].style.backgroundPosition=position)),o[a].parentNode.insertBefore(s[a],o[a]),o[a].onchange=Custom.clear,o[a].getAttribute("disabled")?s[a].className=s[a].className+=" disabled":(s[a].onmousedown=Custom.pushed,s[a].onmouseup=Custom.check));for(o=document.getElementsByTagName("select"),a=0;a<o.length;a++)if(o[a].className.indexOf("styled")>-1){for(t=o[a].getElementsByTagName("option"),i=t[0].childNodes[0].nodeValue,e=document.createTextNode(i),b=0;b<t.length;b++)1==t[b].selected&&(e=document.createTextNode(t[b].childNodes[0].nodeValue));s[a]=document.createElement("span"),s[a].className="select",s[a].id="select"+o[a].name,s[a].appendChild(e),o[a].parentNode.insertBefore(s[a],o[a]),o[a].getAttribute("disabled")?o[a].previousSibling.className=o[a].previousSibling.className+=" disabled":o[a].onchange=Custom.choose}document.onmouseup=Custom.clear},pushed:function(){element=this.nextSibling,this.style.backgroundPosition=1==element.checked&&"checkbox"==element.type?"0 -"+3*checkboxHeight+"px":1==element.checked&&"radio"==element.type?"0 -"+3*radioHeight+"px":1!=element.checked&&"checkbox"==element.type?"0 -"+checkboxHeight+"px":"0 -"+radioHeight+"px"},check:function(){if(element=this.nextSibling,1==element.checked&&"checkbox"==element.type)this.style.backgroundPosition="0 0",element.checked=!1;else{if("checkbox"==element.type)this.style.backgroundPosition="0 -"+2*checkboxHeight+"px";else for(this.style.backgroundPosition="0 -"+2*radioHeight+"px",group=this.nextSibling.name,inputs=document.getElementsByTagName("input"),a=0;a<inputs.length;a++)inputs[a].name==group&&inputs[a]!=this.nextSibling&&(inputs[a].previousSibling.style.backgroundPosition="0 0");element.checked=!0}},clear:function(){inputs=document.getElementsByTagName("input");for(var a=0;a<inputs.length;a++)"checkbox"==inputs[a].type&&1==inputs[a].checked&&inputs[a].className.indexOf("styled")>-1?inputs[a].previousSibling.style.backgroundPosition="0 -"+2*checkboxHeight+"px":"checkbox"==inputs[a].type&&inputs[a].className.indexOf("styled")>-1?inputs[a].previousSibling.style.backgroundPosition="0 0":"radio"==inputs[a].type&&1==inputs[a].checked&&inputs[a].className.indexOf("styled")>-1?inputs[a].previousSibling.style.backgroundPosition="0 -"+2*radioHeight+"px":"radio"==inputs[a].type&&inputs[a].className.indexOf("styled")>-1&&(inputs[a].previousSibling.style.backgroundPosition="0 0")},choose:function(){for(option=this.getElementsByTagName("option"),d=0;d<option.length;d++)1==option[d].selected&&(document.getElementById("select"+this.name).childNodes[0].nodeValue=option[d].childNodes[0].nodeValue)}};window.onload=Custom.init;
		
		
		</script>
<style type="text/css">
.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url('http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/checkbox.png') no-repeat;
display: block;
clear: left;
float: left;
}
</style>
<input type="checkbox" id="1" class="styled" /><label for="1"> test1</label>

[рони]

djonA,

<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[type="checkbox"]{
  display: none;
}

label:before{
  content: '';
  background-position: 0 0;
  width:19px;
  height:25px;
   margin-right: 5px;
  background:url('http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/checkbox.png') no-repeat;
  display: inline-block;
  clear:left;
  float:left;

}
label{
  height:25px;
  display:block;
}

label.styled:before{
    background-position: 0px -50px;
  }
</style>
  <script>
document.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll('[type="checkbox"]'), function(item) {
         item.parentNode.classList[item.checked ? 'add' : 'remove']('styled');
        item.addEventListener('change', function() {
        item.parentNode.classList[item.checked ? 'add' : 'remove']('styled');
        });

});

    });
</script>
</head>

<body>
<label for="1"><input type="checkbox" id="1" class="styled" /> test1</label>
<label for="2"><input type="checkbox" id="2" class="styled"  checked="checked"/> test2</label>
</body>

</html>