css中改变复选框的形状

CSS 中我们可以通过样式来改变窗体中的组件，其中就包括复选框。

input[type="checkbox"] {
    /* 隐藏原有的复选框 */
    display: none;
}

input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border-radius: 2px;
    border: 2px solid #ccc;
}

input[type="checkbox"]:checked + label:before {
    content: "2714";
    text-align: center;
    line-height: 16px;
    color: #fff;
    background-color: #007bff;
} 

代码中首先使用display: none;来隐藏原有的复选框，接着使用:before伪类来设置托盘的样式。设置text-align: center;可以使得内容垂直居中。改变背景颜色可以使得选中状态更为明显。

除此之外，我们还可以使用图片或者 SVG 来自定义复选框的样式，只需要将其作为background-image或者content来设置即可。