我在这里搜索了大量的答案，但没有真正地遇到我正在寻找。找到这个
CSS – How to Style a Selected Radio Buttons Label?，但答案涉及改变标记，这是我想避免的，我会在下面解释。
我试图添加自定义css3复选框和单选按钮到我的XenForo论坛主题，并且我阅读的所有教程在输入后有标签：
<input type="checkBox" id="c1" name="cc" /> <label for="c1">Check Box 1</label>
<label for="ctrl_enable_rte"> <input type="checkBox" name="enable_rte" value="1" id="ctrl_enable_rte" {xen:checked "{$visitor.enable_rte}"} /> {xen:phrase use_rich_text_editor_to_create_and_edit_messages} </label>
我看了为什么这是，但没有找到任何相关的自定义CSS复选框/单选按钮，当标记是这样的。我想避免改变标记，因为我在这里处理一个论坛系统，这将涉及编辑一堆核心模板…我必须更新标记每次论坛软件输出更新(假定模板更改)。
我试图创建的CSS规则，将工作与这种类型的标记，但到目前为止我一直没有成功。我对CSS没有太多的经验，没有记住每一个选择器，并且伪类对我来说还是相当陌生的，所以我希望有人在这里可以揭开一些光如果这将是可能的，如果是这样，我怎么样可能会去。我已经有我的sprite准备去，我只需要把CSS计算出来。
我的主要问题是我不知道如何选择标签(当然只有这些输入涉及的标签)。通常情况下
input[type="checkBox"] + label
被使用，但是当标签不是在输入后，而是外部/之前…我如何选择它？
解决方法
如果您可以编辑标记以包装实际的标签文本，例如：
<label>
<input type="checkBox">
<span>One</span>
</label>
<label>
<input type="checkBox">
<span>Two</span>
</label>
<label>
<input type="checkBox" disabled>
<span>Three</span>
</label>
你可以用CSS解开一些技巧：
label {
position:relative;
cursor:pointer;
}
label [type="checkBox"] {
display:none; /* use your custom sprites instead as background on the span */
}
[type="checkBox"] + span {
display:inline-block;
padding:1em;
}
:checked + span {
background:#0f0;
}
[type="checkBox"][disabled] + span {
background:#f00;
}
演示：http://jsfiddle.net/dMhDM/1/
请记住，如果浏览器不支持：这将失败。
