@import url(../style_member/style_form.css); /* --- 客製化 Checkbox 樣式 --- */ /* 1. 群組排版：讓選項可以整齊排列並自動換行 */ .custom-checkbox-group { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; /* 選項之間的間距 */ padding-top: 5px; /* 稍微往下推一點，對齊左側標題 */ } /* 2. 隱藏原本醜醜的 checkbox (保留功能，但不顯示) */ .custom-checkbox input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* 3. 設定外層 Label 樣式：讓游標變成手指，文字垂直置中 */ .custom-checkbox { display: inline-flex; align-items: center; position: relative; cursor: pointer; font-size: 16px; /* 文字大小 */ color: #333; /* 文字顏色 */ user-select: none; /* 防止連點時反白文字 */ } /* 4. 畫一個新的框框代替原本的 Checkbox */ .custom-checkbox .checkmark { display: inline-block; width: 20px; height: 20px; background-color: #fff; border: 2px solid #ccc; /* 邊框顏色 */ border-radius: 4px; /* 圓角 */ margin-right: 8px; /* 框框和文字的距離 */ position: relative; transition: all 0.2s ease-in-out; /* 加入平滑漸變動畫 */ } /* 5. 滑鼠移過去 (Hover) 時的框框顏色變化 */ .custom-checkbox:hover input ~ .checkmark { border-color: #888; } /* 6. 當被勾選 (Checked) 時的背景色與邊框色 */ .custom-checkbox input:checked ~ .checkmark { /* 這裡使用了你原本 裡設定的主題色變數，如果沒讀到會 fallback 顯示藍色 */ background-color: var(--primary_color, #0056b3); border-color: var(--primary_color, #0056b3); } /* 7. 畫出裡面的白色「打勾」圖示 */ .custom-checkbox .checkmark::after { content: ""; position: absolute; display: none; /* 調整勾勾的位置和大小 */ left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); /* 旋轉成勾勾的角度 */ } /* 8. 被勾選時，顯示那個白色的勾勾 */ .custom-checkbox input:checked ~ .checkmark::after { display: block; }