html - 自定义单选按钮图像选择

Question

我正在尝试自定义单选按钮，但遇到了一点问题。图像正确出现，但它不允许我选择单选按钮，因此图像 Sprite 不会移动(到所选图像)。

当我将单选按钮的 css 更改为(重新打开显示)时:

input[type="radio"]
{

}

出现单选按钮(以及图像)，当我单击单选按钮进行选择时，图像确实会改变大小，但是这样做的重点是没有默认的单选按钮，只有图像。

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;
{

Answer 1

CSS 中存在错误。这绝对无济于事。

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