CSS 核取方塊產生器並未涵蓋 disabled 與 error 狀態。依其設計，基準輸出樣式僅涵蓋三種核取方塊狀態:未勾選、已勾選,以及 focus-visible。該產生器明確省略了 disabled、invalid、required、indeterminate 以及 forced-colors 狀態,將這些留給您自行新增,並對照您的實際表單進行驗證。這是一項刻意的產品設計,並非疏漏,因為這些狀態取決於表單內容、驗證時機,以及作業系統設定,而這些是產生器無法單獨有意義地模擬的。好消息是,該工具保留了 type 為 checkbox 的原生 input,並將其與一個可見的 label 元素配對,因此當您新增 disabled 與 error 樣式時,瀏覽器仍然掌管底層的 checked 狀態、鍵盤啟用,以及表單參與。您的任務是補上缺少的 CSS 選擇器、在目標頁面中測試它們,並在上線前確認它們符合您的無障礙目標。如果您尚未產生基準樣式表,請開啟 CSS 核取方塊產生器,調整尺寸、邊框、圓角以及三種顏色,然後在延伸之前先複製同步產生的 CSS 與 HTML。

does css checkbox generator cover disabled and error states
does css checkbox generator cover disabled and error states

CSS 核取方塊產生器實際上會設定哪些樣式

該產生器會輸出一個乾淨的基準,精準涵蓋一位使用指標裝置的視力正常訪客在首次造訪時所看到的狀態。未勾選的方塊會以所選的方框大小(十六到六十四像素)、邊框(一到六像素)、圓角(零到五十百分比)、背景顏色,以及打勾顏色繪製。已勾選的方塊會填入強調色背景,並顯示一個由 CSS 偽元素繪製的打勾符號,其寬度、高度與邊框粗細會依據所選的方框大小縮放,並以最小值確保在最小支援尺寸下符號仍清晰可見。focus-visible 的外框會以符合強調色的圓環包住控制項,並透過位移確保在周圍頁面上依然清晰。樣式表使用 box-sizing: border-box,因此所選尺寸會包含可見的邊框,在 input 上設定 cursor: pointer,並保留原生 input 元素,讓瀏覽器即使在視覺呈現完全自訂的情況下,仍能驅動 checked 切換、以 Space 鍵啟用,以及表單提交。

為何產生器省略了 Disabled 與 Error 狀態

該工具無法預知您的表單何時會停用某個控制項、會伴隨什麼錯誤訊息,或您的驗證函式庫會如何標記無效的輸入。在預覽中模擬這些狀態需要一些假設,而這些假設無法在所有表單間通用,因此產生器會交給您一組同步的 CSS 與 HTML,並邀請您以自己的選擇器加以延伸。產品 FAQ 直接說明了這一點:基準涵蓋未勾選、已勾選,以及 focus-visible 狀態,而您應在需要時新增並測試 disabled、invalid、required,以及情境式說明。這樣的範疇界定也說明了為何產生與複製的過程完全在當前的瀏覽器分頁中完成,無需帳號、上傳,或儲存的設計狀態。輸出是一個乾淨的起點,而非完成的表單。若想更深入了解原生語意是如何被保留的,請參閱關於 如何以正確的方式用 CSS 製作核取方塊的指南。

如何為產生器的輸出新增 Disabled 與 Error 樣式

  1. 使用 Copy CSS 與 Copy HTML 按鈕,從產生器複製 CSS 與 HTML。每個按鈕會分別要求剪貼簿權限,並回報複製的是哪一個區塊,讓您可以獨立地將它們移至您的程式碼庫。
  2. 將 CSS 貼到一個受控管的樣式表中,並將 .lizely-checkbox 類別重新命名以符合您的命名系統。請保留 box-sizing: border-box、cursor 宣告,以及 focus-visible 外框的完整設定。
  3. 更新 HTML,讓每個 input 都帶有具意義的 id、使用真實的 label 文字而非範例用語,以及您表單所需的任何 name、value 或 required 屬性。請保留 input 嵌套於 label 元素內的結構,如此一來點擊文字仍可切換控制項。
  4. 新增一個 disabled 選擇器,當 input 帶有 disabled 屬性時,針對重新命名後的類別,降低不透明度、淡化背景與打勾顏色、將 cursor 切換為 not-allowed,並在停用的控制項仍可取得焦點時,柔化其焦點外框。
  5. 新增一個 invalid 選擇器,使用 :invalid、[aria-invalid="true"],或兩者並用,將邊框與外框顏色變更為明確的錯誤色調。將 input 與一個透過 aria-describedby 連結的錯誤訊息配對,以便輔助技術能播報失敗原因。
  6. 在實際的目標表單中驗證行為:以 Tab 鍵切換至停用的控制項、確認在預期情況下它會被略過而不納入 Tab 順序,提交無效資料,並確認錯誤樣式有出現,且能被螢幕閱讀器播報。

您必須手動測試的其他狀態

除了 disabled 與 invalid 之外,還有其他幾個狀態落在產生器預覽範圍之外。Indeterminate 狀態常用於「全選」的母核取方塊,需要專屬的視覺處理。Required 狀態會改變原生驗證訊息,並建議加上可見的標記。Read-only 狀態在核取方塊上很少使用,但仍應納入考量。Hover 狀態雖然大多數設計師都會想要,但並未提供預覽。Forced-colors 模式可能會讓作業系統覆寫您的自訂顏色,此模式並未受到模擬,且刻意未被產生器所抵銷。根據 MDN 關於用於抑制原生呈現的 appearance 屬性文件,當您接管繪製工作後,所有使用者所需的視覺提示均由您負責提供。根據 W3C CSS Basic User Interface Level 4 規範中關於 appearance 行為的說明,實際的顏色來自於您的樣式表以及使用者的無障礙設定。Forced-colors 的覆寫通常是有益的,不應在沒有充分理由的情況下將其靜音。

產生器涵蓋範圍 vs. 您必須新增的部分

狀態產生器是否涵蓋?您必須做什麼
未勾選是無
已勾選是無
Focus-visible是在您的實際主題中確認外框對比
Hover否若您的設計需要,新增 :hover 選擇器
Disabled否新增 :disabled 選擇器並驗證焦點行為
Invalid 或錯誤否新增 :invalid 或 [aria-invalid="true"] 樣式,並搭配 aria-describedby
Required否新增 required 屬性,並為原生訊息設定樣式
Indeterminate否為母切換器新增第三種視覺狀態
Forced-colors未模擬在作業系統的高對比模式啟用下進行測試

上線前的測試檢查清單

在部署之前,請讓控制項通過一張精簡但嚴謹的檢查清單。以 Tab 鍵瀏覽表單以確認焦點順序,然後在每個核取方塊上按下 Space 鍵以確認啟用。將頁面放大至 200%,並驗證方塊、標籤,以及任何錯誤文字仍可使用。切換高對比或 forced-colors 模式,確認核取方塊在不失真的情況下仍清晰可讀。提交無效資料,並確認錯誤樣式、顏色對比,以及 aria-describedby 關聯能傳達至螢幕閱讀器。透過您的表單邏輯停用一個控制項,確認它在預期情況下既會被視覺淡化,又會被排除於 Tab 順序之外。產生器的預覽雖然方便挑選幾何與顏色,但唯有目標表單才是真正算數的環境。每當您變更周圍的調色盤、替換外框顏色,或導入新的驗證規則時,請重新執行此檢查清單,因為上述任何一項編輯都可能悄悄使產生器從未繪製的某個狀態退化。

延伸閱讀:從單一 HEX 碼產生 CSS 可用的調色盤。