使用CSS设置复选框check样式

在CSS中，你可以通过伪元素 :checked 来改变复选框（checkbox）的样式。但是，请注意，你只能改变复选框的样式到某种程度。由于浏览器安全性的限制，你不能完全自定义复选框的外观，比如你不能改变复选框的形状或者大小。

下面是一个基本的示例，演示了如何使用CSS来改变复选框选中时的样式：

/* 默认的复选框样式 */
input[type="checkbox"] {
    display: none; /* 隐藏默认的复选框 */
}

/* 自定义的复选框样式 */
input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid #000;
    background-color: #fff;
}

/* 选中时的样式 */
input[type="checkbox"]:checked + label::after {
    content: "\2713"; /* 这是一个勾号的Unicode字符 */
    display: inline-block;
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
    color: #000;
}

然后在HTML中使用这个样式：

<input type="ch