纯CSS无JS实现点击事件

<input id="A" type="checkbox">
<label for="A">
<span class="box"></span>
<span class="info" >已经阅读</span>
</label>

主要根据的技术点：

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

首先这里要实现一个点击后input框出现对号（注意这里的选择对号不是默认的，而是自己设计的有颜色有大小的）如下所示

image

简单的举例子：设计思路把input标签隐藏，根据input是否处于checked的状态来实现 .box标签通过伪类实现对号的添加。如上label标签绑定input的checkbox输入框，绑定方式是通过id的形式，

label的for值绑定input的id 值，id的绑定使得点击label等同于点击input，通过input 的checked 的状态来实现是否有被点击过的判断。

css代码如下

<style>

• {
  margin: 0;
  padding: 0;
  }

.box {
position: relative;
display: block;
float: left;
width: 50px;
height: 50px;
margin-top: 100px;
margin-left: 100px;
border: 1px solid #18c250;
border-radius: 3px;
}

input[type=checkbox]:checked+label .box:before {
content: "";
position: absolute;
top: 28px;
left: 2px;
width: 23px;
height: 3px;
background-color: #18c250;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

input[type=checkbox]:checked+label .box:after {
content: "";
position: absolute;
top: 24px;
left: 15px;
width: 37px;
height: 3px;
background-color: #18c250;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

.info {
float: left;
margin-top: 92px;
margin-left: 10px;
font-size: 48px;
user-select: none;
}

label {
display: inline-block;
max-width: 100%;
}

input[type=checkbox] {
display: none;
}
</style>