自定义表单控件模式

1/* 复选框及其标签的容器 */
2.custom-checkbox {
3  display: inline-flex;       /* 将复选框和标签并排排列 */
4  align-items: center;        /* 垂直居中内容 */
5  cursor: pointer;            /* 鼠标悬停时更改光标为指针 */
6}
7
8/* 用 display:none 隐藏原生复选框会使其无法被键盘聚焦、也不进入可访问性树，此处仅为视觉演示 */
9.custom-checkbox input {
10  display: none;              /* 完全隐藏复选框 */
11}
12
13/* 复选框的视觉表示 */
14.custom-checkbox .checkmark {
15  width: 20px;
16  height: 20px;
17  border: 2px solid #666;     /* 创建复选框边框 */
18  margin-right: 0.5rem;       /* 复选框与标签之间的间距 */
19  position: relative;         /* 用于定位复选标记 */
20}
21
22/* 当输入被选中时显示复选标记 */
23.custom-checkbox input:checked + .checkmark::after {
24  content: '';
25  position: absolute;
26  left: 5px;
27  top: 1px;
28  width: 6px;
29  height: 12px;
30  border: solid #000;
31  border-width: 0 2px 2px 0;  /* 创建复选标记形状 */
32  transform: rotate(45deg);   /* 旋转以形成复选标记符号 */
33}