產生的核取方塊仍為原生表單控制嗎？

是的。HTML 使用輸入型別的核取方塊；CSS 會在瀏覽器保留原生勾選狀態、鍵盤啟動以及表單語義的同時改變其繪圖。

範例中是否包含可訪問的名稱？

是的。輸入被巢狀在可見標籤內，但你必須將範例文字替換為對實際選項具有意義的描述。

是否涵蓋了禁用與錯誤狀態？

沒有。基線僅涵蓋未勾選、已勾選與可焦點狀態；若需要，應新增並測試禁用、無效、必填與情境幫助狀態。

為何該控制在強制色彩模式下會看起來不同？

作業系統與瀏覽器可能因使用者的可訪問性設定而覆蓋自訂色彩。應測試此模式，並避免幹預對使用者有益的覆蓋。

CSS 檢視方塊生成器

使用方式

1.調整大小、邊框、圓角以及三種顏色，同時切換即時核取方塊預覽。
2.複製 CSS 與 HTML，然後將範例標籤替換為實際的選項內容。
3.在目標環境中測試鍵盤焦點、空格鍵啟用、對比度、縮放、錯誤狀態、禁用狀態以及強制色彩。

關於CSS 檢視方塊生成器

CSS 檢視方塊產生器為原生 HTML 檢視方塊打造專屬視覺效果。設定方塊大小、邊框寬度、圓角、強調顏色、背景顏色與勾選標記顏色。頁面會渲染一個真實互動的檢視方塊，並提供預覽中使用的精確 CSS 與可訪問的 HTML。整個產生與複製過程皆在當前瀏覽器標籤中完成，不需帳號、上傳、樣式表服務或儲存設計狀態。

產生的控制元件保留型別為 checkbox 的輸入欄位，而非以一般 div 取代。CSS 外觀：none 會移除瀏覽器預設的繪製樣式，而原生元素在周遭應用程式正確使用這些功能時，仍會提供勾選狀態、鍵盤焦點、表單參與以及禁用行為。HTML 的範例將輸入欄位與可見的標籤文字放在 label 元素中，因此點選文字會切換控制元件與 checkbox，並為 checkbox 提供可存取的名稱。請將範例標籤修改為描述實際選擇，而非在生產環境中保留通用文字。

大小接受從十六到六十四的整數像素。邊框接受從一到六的像素。圓角接受零到五十的百分比。每種顏色必須為完整的六位十六進位值。純生成器拒絕錯誤的顏色、小數（當需整數時）以及超出範圍的幾何設定，不會靜默產生誤導的程式碼。瀏覽器顏色控制元件在正常使用中提供有效值，數值控制元件則限制普通指標與鍵盤操作的變動。

勾選標記僅在檢視方塊被勾選時，透過 ::after 機制繪製。其寬度、高度與邊框厚度會根據選擇的方塊大小縮放，並設有最小值以確保在最小支援尺寸下仍能清晰顯示。標記僅使用右邊與底邊，旋轉四十五度，並以比例偏移定位。這些比例是產品設計的有意選擇，非通用設計標準。在不常見的縮放級別、裝置像素比或極端邊框設定下，抗鋸齒可能導致某邊看起來稍為厚重。

輸出包含 box-sizing: border-box，以確保選擇的大小包含可視邊框。同時包含 cursor: pointer、勾選時的背景與邊框顏色、相對定位以支援 pseudo-element，以及帶有偏移的 focus-visible 設定。焦點外框顏色與選擇的強調顏色一致。焦點不會被移除。這點至關重要，因為鍵盤使用者需要能清楚看見哪個控制元件會在按下 Space 時反應。你的網站可能需要調整外框顏色或寬度，以符合與實際背景對比的可讀性要求。

預覽使用精確產生的樣式表，以封裝的類名 lizely-checkbox 來呈現。點選方塊或其預覽標籤來切換勾選與未勾選狀態。在最終應用測試時，請使用 Tab 與 Space 進行測試；嵌入的工具頁面包含許多可焦點的控制元件，因此僅靠預覽無法取代對目標表單順序與說明的測試。此產生器不會模擬不確定、錯誤、必填、禁用、只讀、高對比或強制色彩狀態。若實際產品需要這些狀態，請自行加入並驗證。

複製 CSS 與複製 HTML 需分別請求剪貼簿權限。成功訊息會標示哪一個輸出被複製。若權限被拒絕，兩個程式碼區塊仍會顯示供手動選擇，頁面不會誤報成功。HTML 程式片段故意不包含內聯指令碼。檢查方塊的狀態由瀏覽器與周遭表單管理。框架使用者可以將 class 轉為 className 並根據需求連線 checked/onChange，但應保留原生輸入與可存取標籤的關係。

一個視覺上吸引人的核取方塊並非自動具有可訪問性。請檢查強調色、背景、勾選標誌、邊框、焦點指示器、頁面周圍環境、懸停狀態、錯誤文字以及禁用狀態在最終主題下的表現。需在 200 百分比縮放與鍵盤導航下進行測試。作業系統強制色彩可能覆蓋自訂色彩；這種行為可能有益，且在無強烈理由下不得幹預。

MDN 記載了用來抑制原生渲染的 appearance 屬性及其相容性考量。CSS 基本使用者介面於標準層面定義了 appearance 的行為。本工具的尺寸與勾選標誌比例為本機定義，並透過精確的字串與幾何測試驗證，並非以外部強制值呈現。因此，結果應視為一個清潔的起點：可將其貼入受控的樣式表中，必要時更名類別，保留原生語義，並以真實內容與輔助技術完整驗證表單。

方法與來源

驗證有界整數幾何與嚴格的十六進位顏色，保留原生標籤核取方塊，從框體大小縮放 CSS 的偽元素勾選標誌，保留焦點可見樣式，並確保預覽與複製輸出完全一致。

常見問題

產生的核取方塊仍為原生表單控制嗎？: 是的。HTML 使用輸入型別的核取方塊；CSS 會在瀏覽器保留原生勾選狀態、鍵盤啟動以及表單語義的同時改變其繪圖。
範例中是否包含可訪問的名稱？: 是的。輸入被巢狀在可見標籤內，但你必須將範例文字替換為對實際選項具有意義的描述。
是否涵蓋了禁用與錯誤狀態？: 沒有。基線僅涵蓋未勾選、已勾選與可焦點狀態；若需要，應新增並測試禁用、無效、必填與情境幫助狀態。
為何該控制在強制色彩模式下會看起來不同？: 作業系統與瀏覽器可能因使用者的可訪問性設定而覆蓋自訂色彩。應測試此模式，並避免幹預對使用者有益的覆蓋。

色彩工具使用指南

查看全部

使用方式

關於CSS 檢視方塊生成器

方法與來源

常見問題

相關工具

色彩工具 使用指南

色彩工具使用指南