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

设置单选按钮的样式

1 个答案: