checkbox dimension with custom layout

by gasp10

HTML

<div class='check'>  
  <input type="checkbox" name="checkBox" id="check1">
  <div></div>
</div>
    testo di prova 1
<div class='check'>  
  <input type="checkbox" name="checkBox" id="check2">
  <div></div>
</div>
    testo di prova 2

CSS

.check
{
    width:52px;
    height:52px;
    position:relative;
}

/*checkbutton 1 --------------------------------*/
#check1
{
    opacity:0.3;
    position:relative;
    top:17px;
    left:17px;
     -ms-transform: scale(4); /* IE */
     -moz-transform: scale(4); /* FF */
     -webkit-transform: scale(4); /* Safari and Chrome */
     -o-transform: scale(4); /* Opera */
     transform: scale(4);
}

#check1 + div:after
{
    content:'';
    border:solid 1px red;
    background:rgba(255,255,0,0.3);
    width:52px;
    height:52px;
    position:absolute;
    top:-1px;
    left:-1px;
    z-index:-1
}

#check1:checked + div:after
{
    border-color:blue; 
    background-color:rgba(0,0,255,0.3);
}

/*checkbutton 2 --------------------------------*/
#check2
{
    opacity:0.3;
    width:52px;
    height:52px;
}

#check2 + div
{
    content:'';
    border:solid 1px red;
    background:rgba(255,255,0,0.3);
    width:52px;
    height:52px;
    position:absolute;
    top:2px;
    left:2px;
    z-index:-1
}

#check2:checked + div
{
    border-color:blue; 
    background-color:rgba(0,0,255,0.3);
}