没有标签的纯CSS复选框

Question

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

Answer 1

这就是我最终的结果。

CSS Checkbox without label

我做的是基本样式的元素后，并设置指针的事件，没有这样你就可以点击真正的元素之后。

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

这将是选中风格

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

然后我们将有我们的检查风格

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

请注意，原来的复选框，将仍然可见下的元素后，我们就可以来不会隐藏它（隐藏它最终会隐藏在元素之后和元素之前），所以你不能在后元素上使用透明度，但仍然可以像在示例中那样使用背景图像位置和背景颜色。

我希望这将帮助你与你的风格！ :)