使用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(:checked).

测试用例 : 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;
}