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

Question

我在这里广泛搜索了这个问题的答案，但还没有完全找到我正在寻找的东西。找到了这个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 不太熟悉，没有记住每个选择器，而且伪类对我来说仍然很陌生，所以我希望这里有人能说明这是否可行，如果可以，我是如何做到的可能会去做。我的精灵已经准备好了，我只需要弄清楚 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;  
}​

演示：

label {
  position: relative;
  cursor: pointer;
}

label [type="checkbox"] {
  display: none;
}

[type="checkbox"]+span {
  display: inline-block;
  padding: 1em;
}

:checked+span {
  background: #0f0;
  display: inline-block;
}

[type="checkbox"][disabled]+span {
  background: #f00;
}

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

http://jsfiddle.net/dMhDM/1/

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

这与其他解决方案基本相同，但stying是在span而不是label上完成的。

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来实现。

查看this 的帖子。

Answer 4

非常有趣的问题。说实话，我很确定仅靠 CSS 是不可能的。

如果标签的 for 属性 (ctrl_enable_rte) 存在某种模式，那么您就有希望了。例如，如果所有复选框标签都以rte 结尾，则可以使用

label[for$=rte] { ... }

如果没有这样的模式，并且复选框 ID 是任意选择的，您将不得不求助于 JavaScript。