当输入在标签内时,CSS复选框和单选按钮？

我在这里搜索了大量的答案，但没有真正地遇到我正在寻找。找到这个 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>

然而在XenForo的标记中，输入在标签内：

<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/

请记住，如果浏览器不支持：这将失败。

这基本上与其他解决方案相同，但是停顿是在跨度而不是标签上完成的。

当输入在标签内时,CSS复选框和单选按钮？

解决方法

相关文章