造型单选按钮

Question

我想勾选复选框。我能够使用以下HTML标记和CSS来完成此操作。

但问题是我有一点不同的HTML标记，我不能改变。 无法更改的原因是它是由插件生成的，所以我需要编辑核心文件来改变这一点，我不想这样做。

那么如何添加相同的样式到我下面的HTML中。

工作HTML：

<input type="radio" id="radio"> 
<label for="radio"></label> 

所需的HTML：

<li> 
    <input id="option-11" type="radio" value="11"> 
    <label for="option-11">Option one</label> 
</li> 

正如你可以看到，虽然标记是相似的，但在标签上面用来显示文本。

CSS：

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

input[type="radio"] + label{ 
    background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png'); 
    padding:0; 
    display: inline-block; 
    width:20px; 
    height:20px; 
} 

input[type="radio"]:checked + label { 
    background:url('http://refundfx.com.au/uploads/image/checkbox_full.png'); 
} 

演示： http://jsfiddle.net/JPSLm/

Answer 1

它与你的代码，我不知道问题出在哪里。

http://jsfiddle.net/sGqsL/

HTML

<li> 
    <input type="radio" id="radio" name="radiogroup"/> 
    <label for="radio"></label> 
</li> 

和CSS

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

input[type="radio"] + label{ 
    background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png'); 
    padding:0; 
    display: inline-block; 
    width:20px; 
    height:20px; 
} 

input[type="radio"]:checked + label { 
    background:url('http://refundfx.com.au/uploads/image/checkbox_full.png'); 
} 

li { 
    list-style-type: none; 
}