Question

我在这里广泛搜索了这个问题的答案，但还没有找到我正在寻找的东西。找到这个CSS - How to Style a Selected Radio Buttons Label?，但答案涉及更改标记，这是我想要避免的内容，我将在下面解释。

我正在尝试为我的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

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

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

与选择基于父母的孩子相反：

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

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

查看this帖子。

Answer 3

非常有趣的问题。说实话，我很确定只用CSS就不可能了。

如果属性（ctrl_enable_rte）的标签有某种模式，那么您有希望。例如，如果所有复选框标签都以rte结尾，则可以使用

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

如果没有这样的模式，并且任意选择复选框ID，则必须使用JavaScript。

Answer 4

IMHO做到这一点而又不会使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);
}

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

4 个答案: