1.隱藏原生控件，使用opacity:0和定位覆蓋自定義樣式；2.通過label與span構建結構，用:checked狀態切換樣式；3.單選按鈕需保持name一致并使用圓形樣式；4.確保無障礙支持。通過將原生input設為透明并絕對定位，使其覆蓋在自定義元素上，點擊視覺按鈕即觸發原生控件，同時利用css的:checked偽類改變外觀樣式，復選框與單選按鈕結構相似，但單選按鈕需互斥選擇且樣式為圓形，此外必須設置label的for屬性及保留鍵盤導航以保證可訪問性。
直接用 css 來創建自定義復選框和單選按鈕，其實并不是完全替換原生控件，而是通過隱藏原始的 input 元素，再用 html 和 CSS 模擬出更美觀的替代樣式。這樣做可以提升界面體驗，同時保持功能邏輯不變。
如何隱藏原生復選框或單選按鈕
實現的第一步是隱藏瀏覽器默認的 checkbox 或 radio 樣式。最常用的方法是使用 opacity: 0 配合定位，把原生的 input 覆蓋在我們自定義的圖形上。這樣用戶點擊的是視覺上的“自定義按鈕”，實際上觸發的是原生控件。
input[type="checkbox"], input[type="radio"] { opacity: 0; position: absolute; width: 1px; height: 1px; }
這樣處理后，就可以自由設計外觀了。注意要給父容器設置相對定位，確保自定義元素能準確定位。
立即學習“前端免費學習筆記（深入）”；
自定義復選框樣式：基本結構與狀態切換
你可以用 label 和 span（或其他標簽）配合來制作一個可視化的復選框。HTML 結構大致如下：
<label class="custom-checkbox"> <input type="checkbox" /> <span class="checkmark"></span> 我同意協議 </label>
CSS 樣式可以根據 input:checked 的狀態來改變外觀：
.custom-checkbox .checkmark { display: inline-block; width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 4px; } input[type="checkbox"]:checked + .checkmark { background-color: #007bff; border-color: #007bff; }
- 可以加點過渡動畫讓狀態變化更平滑
- 注意考慮不同分辨率下的顯示效果，比如移動端適配
單選按鈕的做法類似但略有不同
單選按鈕的結構和思路與復選框差不多，區別主要在于樣式表現。通常單選按鈕是圓形的，而且多個選項之間互斥。
HTML 示例：
<label class="custom-radio"> <input type="radio" name="gender" /> <span class="radiomark"></span> 男 </label> <label class="custom-radio"> <input type="radio" name="gender" /> <span class="radiomark"></span> 女 </label>
CSS 關鍵部分：
.radiomark { display: inline-block; width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 50%; } input[type="radio"]:checked + .radiomark { background-color: #dc3545; border-color: #dc3545; }
- 確保同一組 radio 的 name 屬性一致
- 使用偽類 :checked 控制選中狀態即可
- 圖標可以用背景圖或字體圖標代替純色填充，提升可讀性
不要忽略輔助功能（a11y）
雖然你替換了外觀，但一定要保留無障礙支持。例如：
- 給每個 label 設置正確的 for 屬性，綁定對應的 input id
- 確保鍵盤導航（Tab 鍵）和屏幕閱讀器仍能正常識別這些控件
有時候開發者只關注視覺美化，忽略了交互層面的兼容性，這會導致一些用戶無法正常使用頁面。
基本上就這些。做法不復雜，但細節容易忽略，尤其是狀態同步和無障礙方面。只要理解原理，就可以靈活地做出各種風格的自定義表單控件。
