如何在CSS修改的单选按钮上设置必需的属性

Question

我有一个表格，其中我有5个单选按钮组，并且在第一个单选按钮上设置了必需的属性。这使我可以在通过jquery.form.js提交表单之前使用jquery.validate.js。

我想使用图像而不是浏览器标准单选按钮

我使用以下CSS

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

input[type='radio']+span:before{
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url(images/radiobutton_off.png) no-repeat center bottom;
background-size: 28px 28px;
}

input[type='radio']:checked+span:before{
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url(images/radiobutton_on.png) no-repeat center bottom;
background-size: 28px 28px;
}

input[type='radio']:hover+span:before{
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url(images/radiobutton_on.png) no-repeat center bottom;
background-size: 28px 28px;
opacity: 0.5;
}

label{
cursor:pointer;
}

然后我更改了<input type=radio name=c$row_2[0] value='0' $sel0[$w] required>

到

<label><input type=radio name=c$row_2[0] value='0' $sel0[$w] required><span></span></label>

这对于设置单选按钮的样式效果很好，但是jquery.validate.js不能捕获所需的属性

如何将所需的属性分配给CSS样式的图像单选按钮。

感谢您的帮助。