纯CSS复选框没有标签

Question

我一直在寻找一种轻松设置复选框样式的方法，即使在我没有标签的情况下，但我还没有找到任何完全满意我的答案，所以我决定尝试找到自己的方式，以便其他所有人都认为它有用。

Answer 1

这就是我最终的目标。

CSS Checkbox without label

我所做的基本上是对after元素进行样式设置，并将指针事件设置为none，这样您就可以单击true来显示after元素。

这允许我们让复选框处理单击并将其状态从选中更改为未选中，然后我们将根据复选框状态设置after元素的样式。

这将是未选中的样式

.check:after{
    pointer-events: none;
    background: white;
    content: ...
    ....
}

然后我们会选择格式

.check:checked:after{
    background: green; /* Change background and maybe image */
    ....
}

请注意原始复选框仍然可以在after元素下看到，因为我们无法隐藏它（隐藏它也会在元素之前和之后隐藏）所以你不能在透明度上玩你的After元素，但你仍然可以像我在例子中那样使用背景图像位置和背景颜色。

我希望这会帮助你的风格！ ：）