產生 CSS 核取方塊的正確做法，是保留原生 input type="checkbox"，只透過 CSS 重新調整其外觀，選擇符合表單比例與無障礙需求的尺寸、邊框、圓角，以及三種顏色。 像 CSS Checkbox Generator 這樣的產生器正是為了這個任務而存在：它會去除瀏覽器預設的繪製樣式，提供乾淨的樣式表，並將輸入元素與可見的 label 配對，讓控制項保有表單語意、鍵盤啟動，以及可存取名稱。任何以通用 div 或按鈕取代輸入元素的做法，請把它視為不同的產品，而非核取方塊產生器，因為它會失去原生表單參與、不定狀態，以及標準輔助技術行為。
本文將帶領你走過決策框架：該選擇哪些設定、為什麼這些選擇很重要，以及當產生的程式碼進入你的真實表單後該如何確認。如果你也想要一份針對底層技術的實作教學，請參考 How to Make a Checkbox in CSS the Right Way。
正確做法始於保留原生核取方塊
第一個決策——也是決定其他一切是否可行的關鍵——是輸出結果是否仍是原生表單控制項。MDN 關於 appearance 屬性 的說明，以及 CSS Basic User Interface Level 4 規格 都描述了同一個技巧：在 input 上設定 appearance: none 以去除瀏覽器的繪製，然後自己重新繪製可見的方塊與勾選記號。瀏覽器仍然負責勾選狀態、聚焦管理、停用處理，以及表單提交。CSS Checkbox Generator 完全遵循這個契約：HTML 片段是一個 type="checkbox" 的 input 元素，巢狀於 label 內，而樣式表只改變這個 input 的呈現方式。
如果你看到某個產生器輸出的是帶有 role="checkbox" 的 div、按鈕，或任何非 input 的元素，請直接離開。你將必須自行重新實作 Space 切換、label 關聯、表單提交、不定狀態、停用行為，以及驗證，而且最終結果在螢幕閱讀器或較舊的輔助技術上也不會表現得像真正的核取方塊。
讓方塊幾何與你既有的表單相符
CSS Checkbox Generator 接受三個幾何數值，每個都有明確的邊界：尺寸 16–64 整數像素、邊框 1–6 整數像素，以及圓角 0–50 百分比。這些並非隨意設定；它們涵蓋了密集的表格列、標準表單欄位，以及大型觸控目標，同時排除小數與超出範圍的數值。這一點很重要，因為工具的輸出包含 box-sizing: border-box，所以所選的尺寸已包含可見邊框，而勾選記號會依方塊尺寸縮放，並維持在 16 px 仍可見的最小粗細。
| 表單情境 | 建議尺寸 | 建議邊框 | 建議圓角 |
|---|---|---|---|
| 密集清單或表格列 | 16–20 px | 1–2 px | 0–10% |
| 標準註冊或設定表單 | 20–24 px | 2 px | 10–25% |
| 觸控優先的手機或 kiosk | 28–64 px | 2–4 px | 15–50% |
| 品牌行銷表單 | 符合現有按鈕高度 | 符合現有按鈕邊框 | 符合現有按鈕圓角 |
挑選一列符合你情境的設定，然後將這些數值帶入產生器。如果你的表單中按鈕已經使用 4 px 圓角，就不要突然讓核取方塊使用 50% 圓角；視覺一致性會讓人感受品質。如果你需要快速確認預計使用的強調色在表單背景上是否清晰可讀，請在正式採用前，先透過 Color Contrast Checker 檢查這組配色。
挑選能在聚焦、對比與強制色彩模式下存活的顏色
產生器只接受三種顏色——強調色、背景色，以及勾選記號色——每一個都必須是完整的六位數 HEX 值，不能使用簡寫，也不能有透明度。工具同時會套用一個顏色與強調色相符的 focus-visible 外框，這是一個好的起點，但並非主題的最終定論。你周圍的實際環境（頁面背景、相鄰的輸入、錯誤文字）才能決定這個外框是否真的符合 WCAG 對比；請透過上方連結的 Color Contrast Checker 加以驗證，並視需要覆寫外框顏色或寬度。
兩個需要事先規劃的顏色行為：
- 強制色彩模式。 作業系統與瀏覽器可能會為了使用者無障礙而覆寫你的自訂顏色。根據 W3C UI 規格，這是刻意設計的行為。除非你有特定理由，否則不要抑制它；請改為在啟用強制色彩的情況下測試目標表單，並確認控制項仍然可用。
- 極端設定下的反鋸齒。 在不常見的縮放等級、裝置像素比，或極端的邊框寬度下，勾選記號的右側或下緣看起來可能比其他邊稍微粗一些。產生器並不會嘗試迎合每一種裝置；如果視覺上讓你不舒服，可以將邊框寬度調降一個像素。
以正確方式產生 CSS 核取方塊
- 開啟 CSS Checkbox Generator，並在即時預覽於未勾選與已勾選狀態間切換時，調整尺寸、邊框、圓角，以及三種顏色。
- 依據上方幾何表格，確認預覽符合你的表單情境。瀏覽器的顏色選擇器會提供有效的 HEX 值，而數值輸入會拒絕小數，因此無法輸入超出範圍的數字。
- 點擊預覽方塊與其預覽 label，確認兩種狀態都如你所預期地呈現，包含使用強調色的 focus-visible 外框。
- 分別點擊 Copy CSS 與 Copy HTML。瀏覽器會分別要求剪貼簿權限；若你拒絕，兩個區塊仍會保持可見以便手動選取，且不會出現誤導的成功訊息。
- 將兩個區塊貼到你的專案中。把 label 元素內的範例 label 文字替換為實際的表單選項——這正是賦予核取方塊可存取名稱的關鍵。
- 如果你使用框架，請將 class 屬性改為 className，並依需求串接 checked 與 onChange，但仍請保留原生 input type="checkbox" 以及 label 的關聯。
- 如果產生器使用的限定 class 名稱（產生器使用 lizely-checkbox）與你樣式表中的既有樣式衝突，請重新命名。
在實際部署環境中驗證輸出，而非只看預覽
預覽是一個可運作的核取方塊，但預覽頁面包含許多可聚焦的控制項。請把目標表單視為真正的測試介面。CSS Checkbox Generator 的基準只涵蓋未勾選、已勾選，以及 focus-visible 狀態。它並不會模擬不定、無效、必填、停用、唯讀、高對比，或強制色彩等狀態。請在實際表單中加入並測試每一種狀態，再正式上線。
在視為完成前，你應該執行的一段簡短驗證清單：
- 鍵盤。 使用 Tab 切換到該控制項，並確認出現可見的聚焦指示。當焦點位於 input 本身以及周圍的 label 時，分別按下 Space 並確認核取方塊會切換。
- 對比。 檢查強調色、背景色、勾選記號、邊框，以及聚焦指示相對於周圍頁面（而非僅相對於白色）的對比。請一併驗證 hover 與停用狀態。
- 縮放。 在 200% 縮放下測試，確認控制項不會與 label 重疊，也不會把相鄰欄位擠出畫面。
- 強制色彩。 啟用 Windows 高對比或 macOS 的 Increase Contrast 設定，並確認核取方塊仍可使用。請勿抑制覆寫行為。
- 錯誤與停用。 自行加上 disabled 屬性以及 :invalid 或 :user-invalid 樣式，並確認它們能與錯誤文字清楚呈現。
替換範例 Label 並在框架中保留語意
範例 HTML 將 input 與可見的 label 文字配對在 label 元素內，這就是為什麼點擊文字能切換控制項，也讓核取方塊一開始就擁有可存取名稱。範例用詞刻意設計為通用——你必須將它改為描述實際選項的文字，不要在正式環境留下佔位文字。視覺上吸引人的核取方塊不一定自動具備無障礙性；label 才是告訴輔助技術這個控制項用途的關鍵。
對使用框架的人（React、Vue、Svelte、Solid 等等）來說，規則相同：保留原生 input、保留 label 關聯，只調整屬性語法（class 改為 className，on 改為 on:，依此類推）。如果有元件庫堅持以樣式化的 span 取代 input，請提出反對——這個決定會讓你失去原生表單參與，而那正是產生器努力保留的部分。
最後，請把產生的樣式表視為一個乾淨的起點，而非完成品。將它貼到一個受控的樣式表中，讓它能與你的設計 token 並存；若周圍背景需要不同的對比，請覆寫聚焦外框，並在正式上線前，使用真實內容與輔助技術驗證整份表單。產生器的任務是提供一個已驗證良好的基準；你的任務則是確保它在你的主題下仍能正常運作。
如果你正在權衡選項，Pick the Right Approach to Generate a CSS Cubic Bezier 有更詳細的說明。