36

我在这里广泛搜索了这个问题的答案，但还没有完全找到我正在寻找的东西。找到这个CSS - 如何为选定的单选按钮标签设置样式？但答案涉及更改标记，这是我想避免的事情，我将在下面解释。

我正在尝试将自定义 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

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

4

4 回答 4

17

如果您可以编辑标记以包装实际的标签文本，例如：

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

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

于 2012-11-09T22:56:39.790 回答
5

恕我直言，在不弄乱 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);
}
于 2018-12-31T18:19:36.527 回答
3

Unfortunately CSS doesn't allow the styling of parent elements based on child elements which would be the easy way example:

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

The opposite of selecting a child based on parent:

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

What you are wanting to do can be achieved using jQuery.

Check out this post.

于 2012-11-09T22:53:57.353 回答
1

Very interesting question. Truth be told, I'm pretty sure that's just not possible with CSS alone.

If there's some sort of pattern to the label's for attribute (ctrl_enable_rte), there's hope for you. For example, if all checkbox labels end with rte, you could use

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

If there is no such pattern, and the checkbox IDs are chosen arbitrarily, you'll have to resort to JavaScript.

于 2012-11-09T22:53:59.997 回答