html - 设置单选按钮的样式

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