且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用CSS取消选中复选框

更新时间:2022-12-07 10:39:56

简单的答案是,CSS无法帮助您取消选中该复选框。.

The simple answer is NO, CSS cannot help you uncheck the checkbox..

BUT

您可以使用CSS 检测是否输入通过使用:checked :not(:checked)来检查元素。 。

You can use CSS to detect whether the input element is checked or not by using :checked and :not(:checked) ..

测试用例: 演示

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;
}