突出显示复选框的 CSS 选择器问题答案

【问题标题】：CSS selector issue with highlighting checkbox突出显示复选框的 CSS 选择器问题
【发布时间】：2016-09-26 04:55:15
【问题描述】：

当我把标签放在复选框之后，这个 CSS 选择器就起作用了。

    input[type=checkbox]:checked + label {
        color: red;
    }

    <input type="checkbox"><label>Checkbox1</label>

但我想让复选框在点击标签时也被选中。

这是更新后的 HTML 的 CSS。

        label > input[type=checkbox]:checked {
            color: red;
        }

        <label><input type="checkbox">Checkbox1</label>

我在这里做错了什么？

这是一个文件中的简化 HTML 和样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selectors Test Ground</title>

    <style>
        label > input[type=checkbox]:checked {
            color: red;
        }
    </style>
</head>
<body>
    <form id="checkBoxForm">
        <ul>
            <li>
                <label><input type="checkbox">Checkbox1</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox2</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox3</label>
            </li>
        </ul>
    </form>
</body>

【问题讨论】：

:active 伪类怎么样？
Highlight label if checkbox is checked的可能重复

标签： html css css-selectors

【解决方案1】：

您必须使用“for”属性来设置单击标签时选中的复选框，它不是选择器，它是HTML属性并指向一个id，请参见下面的示例：（我只修改了第一个）。

已编辑：在 sn-p 上添加了 css（并删除了从问题中复制的样式标签和内容）

input[type=checkbox]:checked + label {
        color: red;
    }

    <form id="checkBoxForm">
        <ul>
            <li>
                <input id="chk1" type="checkbox"><label for="chk1">Checkbox1</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox2</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox3</label>
            </li>
        </ul>
    </form>

而且你不能在标签中设置输入。

【讨论】：

选择器应为input[type=checkbox]:checked + label { color: red; }，以便您的建议发挥作用。
选择器和他插入的一样，但是他忘记了标签，并试图将输入插入标签中得到相同的结果，只是这个=）
那你在 html 中的
对不起，我只是从帖子中复制粘贴所有 html =D 我看到了问题并快速发布

【解决方案2】：

在您的原始代码中，复选框和标签是独立的相邻元素。

<input type="checkbox">
<label>Checkbox Label</label>

但是，标签与复选框无关。如果复选框是标签的子元素，则标签将与复选框相关联，就像在您更新的代码中一样。

<label>
    <input type=“checkbox”>
    Checkbox Label
</label>

但是，这是您遇到问题的地方。现在，您的 CSS 不是为复选框旁边的标签设置样式，而是为标签内的复选框设置样式，而不是标签本身。

解决此问题的最简单方法是将元素分开并将复选框链接到具有 HTML 属性的标签。

<input type="checkbox" id="1">
<label for="1">Checkbox Label</label>

【讨论】：

你为什么发和我一样的帖子？哦，而且...输入永远不能在标签标签内。
@JoëlBonetRodríguez 不正确 w3.org/TR/html401/interact/forms.html#edef-LABEL
不推荐在标签内使用输入，并且在处理样式和 ajax 函数时会导致问题，必须在外部才能正常运行。看到在您粘贴的示例（链接）中，有很多示例在外部输入，而在内部只有一个输入，但那只是结构。
@Joël Bonet Rodríguez：这种做法从未被弃用。仅仅因为您不喜欢一种在标准中完全可以接受的特定方式，并不意味着它已“被弃用”。
自 2k9 以来我没有看到这种奇怪的做法。如果您愿意，请继续这样做，但有时 ajax 函数会混合值并将其视为继承，您会花几个小时哭泣如何解决问题。这是不同的标签，要构造不同的项目，将p放入p是否正确？是的，但你可以做得很漂亮，并在 p 中使用 span 属性...嗯？哦，你会得到默认光标：复选框和单选按钮上的指针，因为标签是光标：默认；作为默认属性（根据文档，请参阅 w3c）。