當你使用 CSS Checkbox Generator 時，你會剛好收到兩個同步產生的成品：一個限定範圍的 CSS 類別，用來重新設定真正的 HTML input 樣式；以及一小段 HTML 片段，把該 input 與一段可見的文字標籤配對放在 label 元素內。輸出刻意保持精簡。它不是元件庫、不是已儲存的樣式表，也不是託管的資源；產生與複製的動作完全在當前的瀏覽器分頁中進行，不會有帳號、上傳、樣式表服務，或跨工作階段保存的設計狀態。產生的控制項會保留 type 為 checkbox 的原生 input，而不會把它換成一般的 div，所以瀏覽器仍然掌管勾選狀態、鍵盤啟用以及表單參與。CSS 中的 appearance: none 會移除瀏覽器的預設繪製，同時讓原生元素保留語意，這就是預期輸出得以成立的基礎。CSS 包含 box-sizing: border-box、cursor: pointer、勾選時的背景色與邊框色、用於偽元素打勾符號的相對定位，以及用主題色繪製的 focus-visible 外框。HTML 內不含 inline script，因此勾選狀態由瀏覽器與其所在的表單負責管理。這就是在你做任何自訂調整之前，應該預期的結果樣貌：一個乾淨的起點，讓你貼到受控的樣式表、必要時重新命名，並在它實際要部署的地方進行驗證。
輸出中兩個同步的成品
預期的輸出有精確的結構。一部分是限定範圍的 CSS 規則區塊，套用於產生的類別名稱 lizely-checkbox，套用對象是 input 元素。另一部分是你要貼到表單旁的精簡 HTML 片段。兩者會以完全對應的方式撰寫：CSS 引用與 HTML 相同的類別名稱，而 CSS 選擇器只鎖定該類別、它的 :checked 狀態，以及它的 ::after 偽元素。如果你在其中一個成品重新命名類別，卻沒有同步修改另一個，樣式就會停止對應，結果會回復到宿主瀏覽器原本繪製的外觀。
HTML 片段只包含用來展示此樣式化控制項所需的元素：一個 label 元素，包住 input 與可見的文字。input 保留 type=checkbox，因此瀏覽器將它視為真正的表單欄位。label 內的文字為控制項提供可存取名稱 (accessible name)，讓螢幕閱讀器在焦點落到它時能朗讀出有意義的內容。點擊文字會切換底下的 input，這是正確標記的 checkbox 應有的標準行為。片段中沒有 inline script、沒有隱藏的輔助元素，也沒有額外的 wrapper 來重做原生 input 已經處理好的事。
CSS 使用 appearance 屬性來抑制瀏覽器的預設繪製。MDN 的 appearance 參考文件說明了這個屬性在不同引擎中的行為，而 CSS Basic User Interface 規格則描述了這個產生器所依賴的切換行為：在保留原生語意的同時，讓自訂 CSS 接管外觀。因為產生器並未更動底層控制項，所以只要周邊應用程式正確使用，焦點樣式、表單參與以及 disabled 處理都仍然可用。
產生器強制執行的幾何與色彩規則
預期的輸出由產生器強制執行的硬性規則決定，而非悄悄四捨五入或猜測。三個數值控制項負責方框幾何，三個色彩控制項負責外觀。每個色彩都必須是完整的六位數 HEX 值。產生器會拒絕格式錯誤的色彩、需要整數卻提供小數、以及超出範圍的幾何值，而不是產出誤導性的程式碼。瀏覽器的色彩選擇器在正常使用下會提供完整的 HEX 值，而數值 stepper 則限制了滑鼠與鍵盤的一般調整。
| 設定 | 允許範圍 | 格式 |
|---|---|---|
| 尺寸 | 16 至 64 | 整數像素 |
| 邊框寬度 | 1 至 6 | 整數像素 |
| 圓角半徑 | 0 至 50 | 方框尺寸的百分比 |
| 主題色 | 六位數 | 帶前置 # 的 HEX |
| 背景色 | 六位數 | 帶前置 # 的 HEX |
| 打勾符號顏色 | 六位數 | 帶前置 # 的 HEX |
尺寸值會被解讀為可見方框的外部尺寸，包含邊框，因為產生的 CSS 中含有 box-sizing: border-box。這就是你應該預期看到的渲染大小，而不是內部內容框的大小。如果你更改邊框寬度，可見的整體大小會維持不變，因為邊框是繪製在方框內部的。半徑是方框尺寸的百分比，因此 24 像素方框搭配 50 percent 半徑會產生完全圓滑的 12 像素圓角，而 64 像素方框搭配 50 percent 半徑則會產生完全圓滑的 32 像素圓角。用於偽元素打勾符號的比例是刻意的產品選擇，而非通用的設計標準，且這些比例的設計目的是讓符號在所支援的最小尺寸下仍維持可見。
打勾符號本身只在使用者勾選 input 時，以 ::after 偽元素繪製。它的寬度、高度與邊框粗細會依所選方框尺寸縮放，並設有最低值，以確保在所支援的最小尺寸下符號仍然可見。符號僅使用右側與底部邊框，旋轉四十五度，並依比例的位移進行定位。如果你把邊框推到極端值，或在特殊的裝置像素比下渲染，因為反鋸齒的關係，符號的其中一邊可能看起來比另一邊略重。這是此繪製方式已知記載的限制，而非隱藏的行為。
如何從產生器取得預期的輸出
預期的結果會在瀏覽器分頁中經過一連串簡單的決策後產生。每一步都會修改輸出所依據的同一個預覽，確保你複製的內容與你測試過的內容完全一致。
- 在瀏覽器分頁中開啟 CSS Checkbox Generator。頁面會顯示一個由產生的類別所建構的即時 checkbox，以及目前的數值與色彩控制項，還有位於下方的兩個程式碼區塊。
- 調整尺寸、邊框寬度、圓角半徑以及三個色彩，同時觀察即時預覽更新。預覽使用的是限定範圍類別中那份完全相同的產生樣式表，所以你所見的，就是將被複製的內容。
- 點擊方框或其標籤來切換預覽，確認勾選狀態的繪製符合你的預期，包括打勾符號的顏色、填滿的背景以及圓角。
- 替換範例的標籤文字，讓可存取名稱能描述表單中實際的選項，而不是在正式環境留下泛用的文字。
- 「複製 CSS」與「複製 HTML」會各自獨立地請求剪貼簿權限，並附上訊息指出被複製的區塊。如果權限被拒絕，兩個程式碼區塊仍會保持可見以便手動選取，且頁面不會回報一個假的成功訊息。
- 把 CSS 貼到受控的樣式表，並把 HTML 貼到目標表單中。如果你的框架需要 class 而不是 className，請轉譯該屬性，但保留原生 input 與 label 的對應關係。
輸出刻意不模擬的狀態
預期的基準輸出涵蓋三種狀態：未勾選、已勾選，以及帶有主題色外框的 focus-visible。有幾種真實表單會用到的狀態並未由產生器模擬，必須在目的地新增並驗證。這是基準本身已聲明的限制，而不是缺陷。
| 狀態 | 基準輸出是否涵蓋 | 在目的地需採取的動作 |
|---|---|---|
| 未勾選 | 是 | 無 |
| 已勾選 | 是 | 無 |
| Focus-visible | 是，帶位移的主題色外框 | 確認在實際頁面上的對比 |
| Disabled | 否 | 新增 :disabled 樣式並在表單中驗證 |
| 無效或錯誤 | 否 | 新增錯誤樣式以及靠近 label 的錯誤文字 |
| 必填 | 否 | 新增 required 屬性以及 label 中的指示標記 |
| 唯讀 | 否 | 依表單需求新增唯讀行為 |
| 不定 (Indeterminate) | 否 | 如有需要，透過一小段 inline script 設定 input.indeterminate |
| Hover | 無專屬樣式 | 若設計需要，請新增 :hover |
| 強制色彩 | 未覆寫 | 應測試高對比模式，而非加以抑制 |
視覺上吸引人的 checkbox 不一定就是無障礙的。主題色、背景、打勾符號、焦點環、周邊頁面以及任何 disabled 樣式，都必須在最終的主題中一起檢查。作業系統的強制色彩可能會為使用者覆寫自訂色彩，而這種行為不應被刻意擊敗，因為它通常是有益的。
在目標表單中驗證結果
預期的輸出在複製完成時並未結束。預覽使用的是限定範圍類別名稱 lizely-checkbox，因此內嵌工具頁面在預覽周圍有許多可聚焦的控制項，並不能取代對目標表單分頁順序與操作說明的測試。一個合理的驗證流程至少應涵蓋以下檢查。如需更深入的出貨前檢查清單，請參閱 產生 CSS Checkbox 後出貨前應驗證的事項。
- 鍵盤焦點以合理的順序到達 checkbox，且 focus-visible 外框在真實背景下可見。產生的外框顏色符合你所選的主題色，因此你的網站可能需要不同的外框顏色或寬度，才能在實際環境中達到對比要求。
- 按下空白鍵可切換 checkbox，且已勾選狀態的繪製與預覽一致。按下 Tab 鍵可將焦點移開再移回，且不會遺失狀態。
- 標籤文字與其背景、打勾符號與填滿背景、以及焦點外框與周邊表面之間的對比，皆符合你所遵循專案的對比目標。
- 在 200 percent 縮放下，方框仍與其標籤對齊，且打勾符號不會溢位或被裁切。
- 一旦新增 disabled、required 與錯誤狀態，外觀必須正確，且 disabled 狀態不能因鍵盤操作而意外被進入。
- 在強制色彩模式下，checkbox 仍然可見，且焦點指示器不會消失。在此模式下的預期行為是作業系統可能會覆寫色彩，這種覆寫應被保留而非抑制。
有兩個務實的注意事項值得在上線前了解。類別名稱僅存在於產生器的預覽中，可自由重新命名，但 CSS 與 HTML 必須同時重新命名，否則樣式會悄悄地退回到宿主瀏覽器的預設繪製。產生器不會儲存任何設計狀態，因此如果你在沒有複製的情況下關閉分頁，所選的值就會消失，下次開啟時會從預設值重新開始。如果你需要保留所用過的記錄，請在複製後立刻把複製的成品貼進樣式表的 commit 中。
如需更深入的說明，請參閱 產生 CSS Cubic Bezier 前應了解的事項。