CSS 核取方塊產生器僅接受一組有界限的輸入值，並以固定結構重現它們，因此當你產生 CSS 核取方塊時，真正重要的細節是大小、邊框、圓角、三種顏色、原生語意、焦點可見性，以及一個標明真實選項的標籤。每個數值控制項都會拒絕超出範圍的值，每個顏色都必須是完整的六位數十六進位值，輸出會保留真正的 input type checkbox 包在 label 元素中，而不是用一般性的 div 取代。打勾符號是透過 CSS 的 ::after 偽元素繪製，其比例衍生自所選的方框大小，並且包含一個帶有位移的 focus-visible 外框，讓鍵盤使用者能看出哪個控制項會回應空白鍵。理解哪些細節受到限制、哪些是衍生出來的、哪些只是保留自原生元素，正是讓一個核取方塊「看起來正確」與「能在實際表單中正確運作」之間的差別。
此工具完全在目前的瀏覽器分頁中執行。沒有帳號、沒有上傳、沒有樣式表服務，也沒有儲存的設計狀態。產生與複製都在本地端進行，這也是為什麼相同的輸入在重新載入或不同機器上會重現相同的輸出。如果你要挑選一個能在團隊中沿用的值，請把它當作程式碼來對待:複製一次、放入你的設計權杖中，並且只在產生器本身變動時才重新產生。
產生器接受的輸入，以及為何界限很重要
此工具提供四個數值控制項和三個顏色選擇器，每一個都有經過刻意設計的範圍。這些範圍的形狀本身就是一個細節:它們告訴你輸出已經過驗證能處理哪些內容，以及哪些內容會被工具直接拒絕。超出範圍的幾何設定、格式錯誤的顏色，以及需要整數卻出現小數的情況都會被拒絕，而不是默默產生誤導的程式碼，因此工具接受的值，代表產生器內部已測試過該值。
| 控制項 | 接受範圍 | 單位或格式 |
|---|---|---|
| 大小 | 16 到 64 | 整數像素 |
| 邊框 | 1 到 6 | 整數像素 |
| 圓角 | 0 到 50 | 百分比 |
| 強調色 | 六位數十六進位 | #RRGGBB |
| 背景色 | 六位數十六進位 | #RRGGBB |
| 打勾符號顏色 | 六位數十六進位 | #RRGGBB |
瀏覽器的顏色控制項在正常使用時會提供有效的值，數值控制項也會限制一般滑鼠與鍵盤操作所產生的變更，因此要保持在支援範圍內最簡單的方式，就是使用這些內建的控制項，而不是直接在頁面上輸入。如果你需要超出支援範圍的值、更大的方框、更粗的邊框、非十六進位的顏色格式，或是命名的 CSS 顏色關鍵字，你就必須在複製 CSS 之後再手動編輯，而不是編輯之後才複製。三位數的十六進位縮寫是常見的例子:它雖然是有效的 CSS，但產生器只接受六位數的形式，因此像 #256 這樣的值(而非 #2563EB)會被拒絕。
顏色、對比，以及三個顏色選擇器
三種顏色主導視覺呈現:強調色、背景色，以及打勾符號顏色。強調色在勾選狀態下同時擔任邊框顏色，並作為 focus-visible 外框的顏色，所以改變它會同時連動到三個地方。打勾符號顏色之所以重要，是因為方框需要有填色或標記才能區分已選與未選。產生器使用旋轉四十五度的右邊框與下邊框繪製打勾，而非使用字型或 SVG，這表示打勾顏色與邊框顏色會同時套用於這兩條邊。
請將選定的配色與表單實際所在的環境背景進行比對，而不是與產生器的預覽背景比對。對比要求最有可能適用於標籤文字，而不是打勾本身，因為打勾是個小的視覺元素，而使用者真正閱讀的是標籤，但方框在填滿與空白的狀態下，仍必須對低視能與色覺差異的使用者清楚可讀。若要依據 WCAG 2.2 的對比比例進行量化通過或失敗的判定，Color Contrast Checker 會接收一組前景與背景的十六進位配對，並即時回傳 AA 或 AAA 的判定結果。請將其結果視為選定配色加上你實際頁面背景的一項屬性，而非產生器的屬性。
產生器如何保留原生語意
輸出會保留一個 type="checkbox" 的 input，而不是用一般性的 div 取代它，範例 HTML 會把 input 巢狀放在 label 元素內，使得點擊文字可以切換控制項，並讓核取方塊擁有可存取的名稱。CSS 的 appearance: none 會移除瀏覽器的預設繪製，但原生元素仍會在周圍應用程式正確使用相關功能時，提供勾選狀態、鍵盤焦點、表單參與以及停用行為。原生控制項的逐步說明 詳細介紹了這項區別，如果你正在權衡它與自訂控制項模式(以 display: none 或 visibility: hidden 隱藏 input，並用 JavaScript 重建狀態)的差異，這是正確的閱讀素材。這些模式常常會遺失螢幕閱讀器與輔助技術所依賴的原生表單語意，這也不是本產生器所產生的內容。
MDN 關於 appearance 屬性 的文件，說明了在瀏覽器層級抑制原生繪製的運作方式，以及隨之而來的跨瀏覽器相容性考量。W3C 的 CSS Basic User Interface Level 4 規範在標準層級定義了相同的行為。在覆寫 appearance 規則之前，同時閱讀這兩份資料，有助於避免破壞瀏覽器原生的後備渲染。
焦點、打勾符號，以及工具刻意保持不變的部分
焦點並未被移除。輸出包含一個帶有位移的 focus-visible 外框，其顏色與強調色相符，因此鍵盤使用者能看見哪個控制項會回應空白鍵。你的網站可能需要不同的外框顏色或寬度，以符合其實際環境下的對比要求，在這種情況下，焦點規則是貼上後可以安全覆寫的生成 CSS 之一。
打勾符號僅在 input 處於勾選狀態時，以 ::after 偽元素繪製。其寬度、高度與邊框粗細會依所選的方框大小按比例縮放，並設有能在最小支援尺寸下仍保持標記可見的最小值;該標記僅使用右邊框與下邊框、旋轉四十五度，並依據比例位移進行定位。這些比例是刻意的產品設計選擇，並非通用的設計標準。在不常見的縮放等級、裝置像素比，或極端的邊框設定下，反鋸齒可能會讓某一條邊看起來比另一條稍微粗一些。輸出也包含 box-sizing: border-box，讓選取的大小包含可見的邊框，另外還包含 cursor: pointer、勾選狀態的背景色與邊框顏色，以及用於偽元素的相對定位。
如何在產生器中產生 CSS 核取方塊
- 在目前的瀏覽器分頁中開啟 CSS Checkbox Generator。不涉及帳號、上傳或樣式表服務，產生作業在本地端執行。
- 即時調整大小、邊框、圓角、強調色、背景色與打勾符號顏色，並觀察即時的核取方塊預覽。預覽使用位於限定 class 名稱 lizely-checkbox 中的完全相同生成樣式表，所見即所複製。
- 點擊方框或其預覽標籤以測試勾選與未勾選狀態，並使用鍵盤的 Tab 與空白鍵確認焦點外觀與切換行為。預覽本身無法取代在最終表單中的測試。
- 使用兩個獨立的「複製」按鈕來複製 CSS 與 HTML。每個按鈕會分別要求剪貼簿權限，並以成功訊息指出複製了哪一組輸出。如果權限被拒絕，兩個程式碼區塊仍會保持可見，以便手動選取，且不會回報錯誤的成功訊息。
- 把 label 元素內的範例標籤替換為實際表單選項的文字。產生器刻意使用通用的標籤文字，而將該通用文字直接用於正式環境是一項已被記錄的錯誤。
- 將 CSS 貼入專案的樣式表，如果你的命名慣例要求的話，重新命名 .lizely-checkbox class，並更新 HTML 以對應。HTML 片段刻意不含任何內聯腳本;核取方塊狀態由瀏覽器與周圍表單管理。
- 依據你的框架，把 class 翻譯為 className，並依需要連結 checked 與 onChange，但仍要保留原生 input 與可存取的 label 關聯。
涵蓋範圍與需要另行測試的部分
產生器涵蓋了即時預覽能顯示的視覺狀態。它並未涵蓋預覽無法顯示的狀態，而這個落差正是產生 CSS 核取方塊時最重要的細節之一。最終表單必須新增並驗證基準未模擬的每個狀態。
| 由基準涵蓋 | 必須在最終環境新增並測試 |
|---|---|
| 未勾選狀態 | 停用狀態 |
| 已勾選狀態 | 不定狀態 |
| Focus-visible 外框 | 無效或錯誤狀態 |
| 透過 cursor pointer 的懸停 | required 屬性處理 |
| 原生表單參與 | 強制色彩模式(Windows 高對比) |
| 空白鍵與 Enter 鍵啟動 | 高對比瀏覽器設定 |
驗證這些項目的正確地點是最終表單本身，而不是產生器頁面。嵌入的工具頁面包含許多可聚焦的控制項，因此在那裡測試 Tab 順序與操作指示，只能告訴你預覽的行為符合其自身。請在使用者實際看到的頁面上執行相同的檢查:用鍵盤的 Tab 與空白鍵驗證啟動與焦點、與實際周圍背景的對比、在 200% 縮放下的呈現、至少一個選項上的 disabled 屬性，以及你的表單所暴露的任何錯誤或必填狀態。
Pasting the output into a real stylesheet
The copied CSS is best treated as a clean starting point rather than a finished rule. Paste it into a controlled stylesheet, rename the class if needed, preserve the native semantics, and validate the complete form with real content and assistive technology. A visually attractive checkbox is not automatically accessible, so the final theme check should walk through the accent, background, checkmark, border, focus indicator, surrounding page, hover state, error text, and disabled state together.
Motion is not generated, so no animation preference handling is needed for this baseline. Operating-system forced colors may override custom colors; that behavior can be beneficial and should not be defeated without a strong reason. If you want a tighter loop on shipping-readiness, the pre-ship verification checklist covers the same set of checks in checklist form and pairs well with this guide.