造型單選按鈕

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