设置单选按钮的样式

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