css 复选框只能勾选一下

CSS是一种非常强大的网页样式表语言，可以通过它实现网页的各种图形效果，其中包括复选框只能勾选一下，下面我们来一起学习一下如何使用CSS实现这个效果。

input[type="checkBox"]{
    display: none;
}

input[type="checkBox"]:checked + label{
    background-color: red;
}

input[type="checkBox"]:not(:checked) + label{
    background-color: #ddd;
}

input[type="checkBox"]:checked ~ input[type="checkBox"]{
    display: none;
}

首先，我们需要将复选框的display属性设置为none，这样它就不会出现在页面上了。然后，我们给每个复选框对应的label标签添加样式，用于表现复选框勾选与未勾选状态的不同颜色。

最后，我们使用CSS选择器：checked和:not()来判断复选框是否勾选，用~选择器选择未勾选的复选框，并将它们的display属性设置为none，这样就保证了只有一个复选框可以被勾选。