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

Question

我在这里广泛搜索了一个答案,但还没有找到我正在寻找的东西.找到这个CSS - 如何设置所选单选按钮标签的样式？但答案涉及更改标记,这是我想要避免的内容,我将在下面解释.

我正在尝试为我的XenForo论坛主题添加自定义css3复选框和单选按钮,我读过的所有教程在输入后都有标签:

<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没有太多经验,没有记住每一个选择器,伪类对我来说仍然很陌生,所以我希望这里有人能说明这是否可行,如果可行的话,我怎么样可能会去做.我已经准备好了我的精灵,我只需要弄清楚CSS了.

我的主要问题是我无法弄清楚如何选择标签(当然只有与这些输入有关的标签).通常是这样的

input[type="checkbox"] + label

使用,但当标签不是在输入之后而是在它之外/之前...如何选择它？

Answer 1

如果您可以编辑标记以包装实际标签文本,例如:

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

请记住,如果浏览器不支持,这将失败:checked.

这基本上与其他解决方案相同,但是在跨度而不是标签上进行晃动.

Answer 2

恕我直言，最好的方法是做到这一点，而不会通过 PURE CSS 搞乱 html

 input[type="checkbox"] {
     position: relative;
     cursor: pointer;
     padding: 0;
     margin-right: 10px;
}
 input[type="checkbox"]:before {
     content: '';
     margin-right: 10px;
     display: inline-block;
     margin-top: -2px;
     width: 20px;
     height: 20px;
     background: #fcfcfc;
     border: 1px solid #aaa;
     border-radius: 2px;
}
 input[type="checkbox"]:hover:before {
     background: #f5821f;
}
 input[type="checkbox"]:focus:before {
     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
 input[type="checkbox"]:checked:before {
     background: #f5821f;
     border-color: #f5821f;
}
 input[type="checkbox"]:disabled {
     color: #b8b8b8;
     cursor: auto;
}
 input[type="checkbox"]:disabled:before {
     box-shadow: none;
     background: #ddd;
}
 input[type="checkbox"]:checked:after {
     content: '';
     position: absolute;
     left: 5px;
     top: 8px;
     background: white;
     width: 2px;
     height: 2px;
     box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
     transform: rotate(45deg);
}

Answer 3

不幸的是，CSS 不允许基于子元素设置父元素的样式，这是一个简单的方法示例：

div.a < div { border: solid 3px red; }

与根据父项选择子项相反：

div.a > div { border: solid 3px red; }

您想要做的事情可以使用 jQuery 来实现。

看看这篇文章。