如何将样式应用于仅使用 CSS 选中复选框的标签？答案

【问题标题】：How can I apply styles to a label whose checkbox is checked using only CSS?如何将样式应用于仅使用 CSS 选中复选框的标签？
【发布时间】：2012-08-21 05:00:49
【问题描述】：

假设我有一个基本网页：

<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX"><INPUT TYPE=checkbox ID="THE_CHECKBOX"/> Blue when checked!</LABEL>

现在假设我希望标签文本在未选中时显示为红色，在选中时显示为蓝色。我该怎么做？我想要一些基本的东西，如下所示。在这里，我使用了一个假设的运算符“<”，意思是“有孩子”，但它当然行不通，因为没有这样的运算符：

#THE_LABEL{
  color:red;
}
#THE_LABEL < #THE_CHECKBOX[checked]{
  color:blue;
}

除了理论上的“<”之外的所有东西都是有效的 CSS，这让我想知道是否有真正的方法来实现这种行为。 有没有人知道一种有效的 CSS 3（或更低版本）方法来根据复选框的状态设置标签样式，而不使用 JavaScript？

【问题讨论】：

你真的会全部大写吗？
我在编写 HTML 元素、它们的属性和诸如元素 ID 之类的“常量”时会这样做。我发现它可以帮助我更轻松地区分元素和实际内容，即使我使用的是公共计算机并且必须使用记事本，或者其他一些类似的可怕情况。我希望我的偏好不会对您造成困扰，但它们具有相同的结果并且对我个人有所帮助。另外，如果我没记错的话，它们曾是首选；3
感觉你的代码在对我大喊大叫..lol
呵呵！这样读起来很有趣，有时：3

标签： html css checkbox styles

【解决方案1】：

您不应该将输入字段放在标签内。

由于标签的内容出现在复选框之后，只需这样制作 HTML：

    <INPUT TYPE=checkbox ID="THE_CHECKBOX"/> 
    <LABEL ID="THE_LABEL" FOR="THE_CHECKBOX">Blue when checked!</LABEL>

然后使用这个 CSS：

#THE_LABEL {
    color: red;
}

#THE_CHECKBOX:checked + #THE_LABEL {
    color: blue;
}

Live demo

+ 是同级选择器。 IE8及以下不支持。

【讨论】：

哦，我喜欢它！不过，这可以通过包含输入的标签来完成，因此标签和框之间没有间隙吗？
@Supuhstar 在<input /> 之后删除换行符（或任何空格）。
谢谢！另外，如果我理解 IE8 的行为正确，那么如果您在文档中使用它应该支持它。
请注意，在我编辑之前，复选框有 2 个IDs。这在 HTML 中是不合适的，导致第二个被丢弃，这意味着 LABEL 的 FOR 也被忽略了。

【解决方案2】：

对不起，请看：

Is there a CSS parent selector? 和 Complex CSS selector for parent of active child

关于这个话题的更多讨论，但似乎不可能。

【讨论】：

【解决方案3】：

我相信这将在 CSS4 中起作用，但目前这只是理论上的：

#THE_LABEL{
  color:red;
}
#THE_LABEL /for/ :checked {
  color:blue;
}

^{JSFiddle test}

浏览器支持

我每隔几个月就会回来检查一次。以下是以下布局引擎的现代版本的支持状态：

WebKit：否（Safari、iOS 网络视图）
- 闪烁：否（Chrome、基于 Chromium 的浏览器、许多开源项目、Android 网络视图）
Gecko：否（Firefox，许多开源项目）
Trident：否（IE、Windows 网络视图、Steam）
- EdgeHTML：否（Microsoft Edge）

【讨论】：

这不是真的。 CSS3 做得很好。在此处查看接受的答案。
@cullub 请阅读我的完整答案。目前只是理论上的。当然，我看到了接受的答案；我接受了：P