html - 使用 CSS 取消选中复选框

Question

对于那些不熟悉的人，复选框的 checked 属性将接受任何输入作为选中该框的标志。事实上，它不需要任何文字。所以所有这些都将选中该框

<input type="checkbox" checked />
<input type="checkbox" checked="false">
<input type="checkbox" checked="">
<input type="checkbox" checked="0">

所有这些都将选中此框。

我的问题是我收到了一个复选框，需要取消选中它。我不能只更改它的值 - 仍然可以检查它。我需要从轨道上用核武器摧毁它。使用 javascript 或 jQuery 非常容易做到这一点，但该网站不允许在我的 CSS 中使用任何内容。

我阅读了大约 100 个属性的列表以及如何重置它们 - auto、normal、0、inherit 等等，但是“checked”不在列表中，我尝试了所有这些以及我能想到的任何东西, 这个复选标记不会消失。

Answer 1

简单的答案是NO，CSS 无法帮助您取消选中复选框..

但是

您可以使用 CSS 来检测 input 元素是否被选中，方法是使用 :checked 和 :not(:选中) ..

测试用例: Demo

HTML

<ul>
    <li>
        <input type="checkbox" checked />
        <label for="">Checked</label>
    </li>
    <li>
        <input type="checkbox">
        <label for="">Unchecked</label>
    </li>
        <li>
        <input type="checkbox" checked>
        <label for="">Checked Again</label>
    </li>
</ul>

CSS

input:checked + label {
    color: green;
}

input:not(:checked) + label {
    color: red;
}