css点击文字复选框选中 |css购物车模板

<input type="checkbox" id="checkbox">
<p for="checkbox">点击偶选中复选框</p>
p[for="checkbox"]::before {
content: "";
display: inline-block;
width: 30px;
height: 30px;
background: #fff;
border: 1px solid #ccc;
margin-right: 10px;
vertical-align: middle;
cursor: pointer;
}
p[for="checkbox"]::after {
content: "选中";
display: none;
}
input:checked+p::before {
border: 1px solid #33c3f0;
background: #33c3f0;
}
input:checked+p::after {
display: inline-block;
}

在上面的代码中，大家首先定义了一个checkbox和一个p标签，p标签使用了for属性来关联checkbox。接下来，大家在p标签的::before伪元素中定义了一个模拟复选框的样式，再在::after伪元素中定义了默认的选中样式。其中，content属性可以用来插入内容或字符。display属性用来控制伪元素是否可见。

接下来，大家使用:checked伪类选择器来选中已勾选的复选框，并使用相邻兄弟选择器+来选中紧接着复选框后面的p标签。在选中后，大家可以通过修改::before和::after的样式来使用不同的样式表示是否选中复选框。

最后，大家就可以通过点击p标签来选中复选框并显示选中效果了。