自定義複選框，
這段代碼實現了一個自定義樣式的複選框效果，包括隱藏原生複選框、點擊標簽來改變複選框狀態、以動畫效果顯示選中狀態等功能。
Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定義複選框</title>
<link rel="stylesheet" href="./02-自定義複選框.css">
</head>
<body>
<div class="checkbox-wrapper">
<input checked="" type="checkbox" class="check" id="check1-61">
<label for="check1-61" class="label">
<svg width="45" height="45" viewBox="0 0 95 95">
<rect x="30" y="20" width="50" height="50" stroke="black" fill="none"></rect>
<g transform="translate(0,-952.36222)">
<path d="m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4"
stroke="black" stroke-width="3" fill="none" class="path1"></path>
</g>
</svg>
<span>Checkbox</span>
</label>
</div>
</body>
</html>
CSS
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #e8e8e8;
}
.checkbox-wrapper input[type="checkbox"] {
visibility: hidden;
display: none;
}
.checkbox-wrapper *,
.checkbox-wrapper ::after,
.checkbox-wrapper ::before {
box-sizing: border-box;
user-select: none;
}
.checkbox-wrapper {
position: relative;
display: block;
overflow: hidden;
}
.checkbox-wrapper .label {
cursor: pointer;
}
.checkbox-wrapper .check {
width: 50px;
height: 50px;
position: absolute;
opacity: 0;
}
.checkbox-wrapper .label svg {
vertical-align: middle;
}
.checkbox-wrapper .path1 {
stroke-dasharray: 400;
stroke-dashoffset: 400;
transition: .5s stroke-dashoffset;
opacity: 0;
}
.checkbox-wrapper .check:checked+label svg g path {
stroke-dashoffset: 0;
opacity: 1;
}
實現思路拆分
.checkbox-wrapper input[type="checkbox"] {
visibility: hidden;
display: none;
}
这行代码隐藏了 input 类型为 checkbox 的原生复选框，设置其 visibility 为 hidden ， display 为 none 。这样用户将看不到原生复选框，而只能看到自定义的复选框样式。
.checkbox-wrapper *,
.checkbox-wrapper ::after,
.checkbox-wrapper ::before {
box-sizing: border-box;
user-select: none;
}
这段代码设置了 .checkbox-wrapper 下所有元素（ * ）、伪元素 ::after 和 ::before 的 box-sizing 为 border-box ，并禁止用户选择（ user-select: none ）。这确保了元素的盒模型计算方式和禁止了用户选择文本。
.checkbox-wrapper {
position: relative;
display: block;
overflow: hidden;
}
这段代码定义了 .checkbox-wrapper 类的样式，设置其定位为相对定位，显示方式为块级元素，且溢出内容隐藏。这样可以作为容器来包裹自定义的复选框元素。
.checkbox-wrapper .label {
cursor: pointer;
}
这段代码设置了 .checkbox-wrapper 下的 .label 类的样式，将鼠标光标设置为手型，表示该元素可被点击。
.checkbox-wrapper .check {
width: 50px;
height: 50px;
position: absolute;
opacity: 0;
}
这段代码定义了 .checkbox-wrapper 下的 .check 类的样式，设置其宽度和高度为50px，定位为绝对定位，透明度为0。这个元素可能是用来模拟复选框的外观。
.checkbox-wrapper .label svg {
vertical-align: middle;
}
这段代码设置了 .checkbox-wrapper 下的 .label 类内的 svg 元素的垂直对齐方式为居中。
.checkbox-wrapper .path1 {
stroke-dasharray: 400;
stroke-dashoffset: 400;
transition: .5s stroke-dashoffset;
opacity: 0;
}
这段代码定义了 .checkbox-wrapper 下的 .path1 类的样式，设置路径的虚线样式，包括虚线间隔和虚线偏移。还设置了动画过渡效果和透明度为0。
.checkbox-wrapper .check:checked + label svg g path {
stroke-dashoffset: 0;
opacity: 1;
}
这段代码使用了CSS选择器，当 .check 被选中时，其相邻的 label 元素内的 svg 元素下的 g 元素下的 path 元素会显示出路径，包括路径偏移和不透明度。
