Html – custom radio button image selection

Im trying to customise radio buttons but having a little problem. The image comes up correctly, however it doesn't allow me to select a radio button, therefore the image sprite does no move along (to the selected image).

When I change the css for the radio button to (turn the display back on) :

input[type="radio"]
{

}

The radio button appears (as well as the images), when I click the radio button to selected, the images do change size, however the whole point of this is to have no default radio button but just the images.

HTML

   <div class="radio-inline">
       <input type="radio" id="" name="tester"/><label for=""><span></span>Button 1</label>
   </div>
       <div class="radio-inline">
       <input type="radio" id="Radio3" name="tester"/><label for=""><span class="label-font"></span>Button 2</label>
   </div>

CSS

.radio-inline
{
   margin-bottom:15px;
}

input[type="radio"]
{
    display:none;
}

input[type="radio"] + label
{
    display:inline-block;
    vertical-align:middle;
    cursor:pointer;
    font-size:16px;
    font-weight:200;  
}


input[type="radio"] + label span
{
    display:inline-block;
    width:40px;
    height:40px;
    vertical-align:middle;
    background:url(../images/radio-btn.png) left top no-repeat;
    cursor:pointer;    
}

input[type="radio"]:checked
{
    background:url(../images/radio-btn.png) -40px top no-repeat;
{