更改checkbox框样式

.checkbox {
width: 30%;

input {
width: 17px;
height: 17px;
position: relative;
border: none;
top: -2px;
background: transparent;
-webkit-appearance: none;
vertical-align: middle;
outline: none;
}
input::before {
display: block;
width: 100%;
height: 100%;
border-radius: 28px;
background: #fff;
content: ” “;
border: 1px solid #ddd;
}
input::after {
transform: rotate(-45deg);
position: absolute;
top: 25%;
left: 18%;
display: table;
width: 11px;
height: 6px;
border: 2px solid #fff;
border-top: 0;
border-right: 0;
content: ” “;
opacity: 1;
}
input:checked:before {
background: #92b3ff;
width: 15px;
height: 15px;
border: 2px solid #92b3ff;
}
}
这是一种取巧的方法，可以根据自己的需求更改大小和颜色