開啟 CSS 核取方塊產生器，設定方塊大小(16 到 64 像素)、邊框寬度(1 到 6 像素)、圓角半徑(0 到 50 百分比)、強調色、背景色與勾選記號顏色為六位數 HEX 值，然後將同步產生的 CSS 與 HTML 複製到你的樣式表。這個工具會在 label 元素內部產生一個原生的 input type="checkbox"，並以限定範圍的 class 設定樣式，透過 appearance: none 重設來抑制瀏覽器繪製，同時保留勾選狀態與鍵盤啟動功能，並以旋轉的 ::after 偽元素繪製勾選記號，以及一個顏色符合你所選強調色的 focus-visible 外框。整個產生過程完全在目前的分頁中進行，程式碼片段中不會加入 JavaScript、不需要帳號或上傳，而且兩個程式碼區塊都會持續顯示，因此即使剪貼簿權限被拒，你仍然可以手動選取。將產生的結果視為一個乾淨的起點，並在實際表單上線前驗證鍵盤焦點、Space 鍵啟動、對比、縮放、停用狀態與強制色彩。
三步驟工作流程
- 開啟 CSS 核取方塊產生器，並調整方塊大小(16 到 64 px)、邊框寬度(1 到 6 px)、圓角半徑(0 到 50 百分比)，以及三個六位數 HEX 顏色(強調色、背景色、勾選記號)。頁面會拒絕格式錯誤的顏色、數值欄位中的小數，以及超出範圍的幾何設定，而不是產生靜默的錯誤，你可以點擊方塊或其預覽標籤來測試勾選與未勾選狀態。
- 點擊複製 CSS，然後複製 HTML。如果剪貼簿權限被允許，成功訊息會指出複製的是哪一個區塊;如果被拒絕，兩個區塊會保留在畫面上供手動選取，且不會回報錯誤的成功訊息。將 HTML 片段中的範例 label 替換為描述表單選項的真實文字。
- 將 CSS 貼到你的樣式表中(若需要不同的識別名稱可重新命名限定範圍的 class)，並把 HTML 放入你的表單。然後在實際的目的地頁面中測試鍵盤焦點、Space 鍵啟動、對比、縮放至 200 百分比、停用狀態，以及作業系統的強制色彩。
產生器控制項目與其限制
頁面上每個互動輸入都對應一項設計決策，每個項目在正常使用時都有由控制項強制執行的硬性界線。下表摘要說明可接受的範圍、格式，以及每個控制項在產生輸出中的作用。
| 控制項 | 可接受範圍或格式 | 在輸出中的作用 |
|---|---|---|
| 方塊大小 | 16 到 64 像素(整數) | 設定可見方塊的寬度與高度;邊框透過 box-sizing: border-box 包含在內 |
| 邊框寬度 | 1 到 6 像素(整數) | 設定未勾選與勾選狀態的邊框;在極端設定下，反鋸齒可能會讓某一邊看起來略粗 |
| 圓角半徑 | 0 到 50 百分比 | 將方塊圓角化;超過 50 百分比後，形狀就不再像核取方塊 |
| 強調色 | 六位數 HEX(例如 #2563EB) | 驅動勾選狀態的背景、勾選狀態的邊框，以及 focus-visible 外框顏色 |
| 背景色 | 六位數 HEX | 填滿未勾選狀態的方塊 |
| 勾選記號顏色 | 六位數 HEX | 繪製旋轉的 ::after 偽元素，僅在 input 處於勾選狀態時顯示 |
頁面會拒絕格式錯誤的顏色、在需要整數的位置出現小數，以及超出範圍的幾何設定，因此你複製的值永遠會是有效的 CSS。數值增減按鈕會限制一般指標與鍵盤的變動，而瀏覽器的色彩選擇器在正常使用時會提供有效的 HEX 值，這也是為什麼這個產生器的行為比較像嚴格的驗證器，而不是自由輸入的文字欄位。
解讀產生的 CSS 與 HTML
HTML 片段刻意保持精簡:一個 type="checkbox" 的 input、產生的 class、一個 id，以及一個包含可見文字並包住 input 的 label 元素。將 input 嵌套在 label 中，代表點擊文字會切換控制項，並為核取方塊提供一個無障礙名稱。片段中不包含行內腳本，核取方塊狀態由瀏覽器與周圍的表單管理。
CSS 區塊以 input 上的 appearance: none 開頭，這會抑制瀏覽器的預設繪製，但原生元素仍會在周圍應用程式正確使用時提供勾選狀態、鍵盤焦點、表單參與，以及停用行為。MDN 記載了 appearance 屬性及其相容性考量，而 CSS Basic User Interface Level 4 規格則在標準層級定義了外觀切換行為。區塊中也設定了 box-sizing: border-box，讓所選的大小包含可見邊框，以及 cursor: pointer 讓控制項讀起來具有互動性，並包含勾選狀態的背景與邊框顏色、用於偽元素的相對定位，以及一個顏色符合你強調色且帶有偏移量的 focus-visible 外框。焦點並未被移除，這很重要，因為鍵盤使用者需要可見的指示來判斷哪個控制項會回應 Space 鍵。
勾選記號本身是透過 input 上的 ::after 偽元素繪製，僅在 input 處於勾選狀態時出現。其寬度、高度與邊框粗細依方塊大小縮放，且具有最小值以確保在 16 像素下仍然可見。僅繪製右側與底部的邊框，整個形狀旋轉四十五度，並使用比例式偏移設定位置。這些比例是此工具中有意為之的產品決策，並非通用的設計標準。在不常見的縮放等級、裝置像素比，或極端邊框寬度下，反鋸齒可能會讓勾選記號的某一邊看起來略粗，這是縮放後偽元素邊框的預期行為，而不是渲染瑕疵。
貼上之後:驗證無障礙與目的地表單
基準輸出涵蓋三種狀態:未勾選、勾選，以及 focus-visible。視覺上吸引人的核取方塊並不自動具有無障礙性，因此目的地主題在上線前仍須通過多項檢查。下表區分了產生器涵蓋的內容，以及你必須在實際表單中新增或驗證的內容。
| 狀態或情境 | 產生器輸出已涵蓋 | 你必須在目的地新增或測試 |
|---|---|---|
| 未勾選與勾選 | 是 | 將範例 label 文字替換為真實的選項描述 |
| 鍵盤 focus-visible | 是，使用強調色作為外框 | 驗證外框對比是否與周圍頁面相符;若有需要可依據實際背景重新著色 |
| Space 鍵啟動與 Tab 順序 | 原生，由 input 元素保留 | 測試目的地表單實際的焦點順序、操作說明與略過連結 |
| 停用、無效、必填、不定狀態 | 否 | 若表單使用這些狀態，需為 :disabled、:invalid、:required 與不定狀態新增自訂樣式 |
| Hover 狀態 | 基準中沒有明確的 hover 規則 | 決定 hover 是否應改變顏色或保持中性 |
| 作業系統強制色彩 | 瀏覽器可能覆寫自訂顏色 | 測試 Windows 高對比等模式;除非有充分理由，不要規避覆寫 |
| 縮放至 200 百分比 | 大小使用像素，搭配比例式勾選記號 | 手動調整大小並確認焦點、方塊與勾選記號仍清晰可見 |
若需要這些目的地端驗證步驟的結構化逐步說明，請參閱 如何在你產生 CSS 核取方塊後檢查結果。你的網站可能需要不同的外框顏色或寬度，才能在實際環境中達到對比要求，因為預設外框綁定的是你在產生器中選擇的強調色，在較深或較淺的頁面背景上可能不易辨識。
框架專屬注意事項與重用模式
使用框架的使用者可以視需要將 class 改為 className，並連接 checked 與 onChange，但應保留原生 input 與無障礙 label 的關係。將 input 替換為通用的 div 會破壞表單提交、移除鍵盤啟動、移除無障礙名稱，這是自訂核取方塊程式碼中最常見的錯誤回歸。若將片段複製到受控元件中，請保留 type 屬性、label 嵌套與可見的 label 文字，除非你的表單在別處已經需要該模式，否則不要把狀態移出瀏覽器管理的核取方塊屬性。
這個產生器完全在目前的瀏覽器分頁中執行，不需帳號、上傳、樣式表服務或儲存的設計狀態，非常適合快速實驗與短期的樣式分支。對於需要長期保存的設計，請將程式碼貼到受控的樣式表中，若預設的限定範圍名稱與你的命名規則衝突可重新命名 class，並記錄所選的大小、邊框、半徑與三個 HEX 值，以免未來的維護者必須從編譯後的樣式表反向推導。如何記錄你的 CSS 核取方塊產生器步驟涵蓋了這類記錄的結構。基準輸出不會產生動畫，因此不需要為此處理動畫偏好設定。
快速參考與疑難排解
如果你貼上的核取方塊與預覽不符，常見原因包括下遊規則覆寫了 box-sizing、父樣式表將 appearance 設定為不同的值、缺少 label 嵌套，或是框架在渲染時移除了 type 屬性。當你記錄了產生時所用的確切大小、邊框、半徑與三個 HEX 值，且周圍表單已透過純鍵盤導航在 200 百分比縮放下測試過，這些情況會比較容易除錯。