一個妥善建構的 CSS 核取方塊,是經過樣式化的原生 input type="checkbox",而不是一個裝成核取方塊外觀的 div。瀏覽器仍完整掌握勾選狀態、以 Space 鍵啟動、焦點管理,以及表單參與;CSS 只負責改變使用者看到的樣貌。標準技巧是先套用 appearance: none(有時會寫成 -webkit-appearance: none)以移除瀏覽器的預設繪製,接著用 width、height、border、border-radius,以及三種顏色重新繪製外框:未勾選的背景、強調色或已勾選的背景,以及勾號的顏色。勾號本身通常是由右側與底部的邊框所構成的旋轉虛擬元素,使其能隨方塊大小縮放。只要你保留可見的 label 包住 input,或用 for 屬性指向其 id,由於底層元素仍是真實的核取方塊,label 關聯、表單送出、以及輔助科技支援就能持續正常運作。CSS Checkbox Generator 將這項技巧包裝在即時預覽裡,並強制採用合理的數值範圍,讓你可以直接複製產生的樣式表與 HTML,而無需重新推導任何運算。
「用 CSS 製作核取方塊」實際上代表什麼
「用 CSS 製作核取方塊」這句話通常代表以下兩種意思之一。大多數讀者想要的是一個能直接放入既有表單,又不會失去鍵盤操作、焦點、label 點擊、以及表單送出行為的核取方塊。較小的一部分讀者則希望把獨立核取方塊當作 UI 切換開關,就像 CSS 核取方塊 hack 能驅動手風琴選單與投影片那樣。兩者都基於同一個起點:保留原生 input type="checkbox",只交由 CSS 處理方塊的外觀。原生元素免費為你提供勾選狀態、不定狀態支援、焦點管理、Space 鍵啟動,以及輔助科技支援。用樣式化的 div 取代它,等於要手動重建上述所有功能,這正是為什麼幾乎所有談無障礙的 CSS 核取方塊指南,最終都還是回到原生 input。
CSS Checkbox Generator 明確屬於第一類。它會為真實的核取方塊套用樣式,在預覽中顯示所使用的完整 CSS class 與 HTML,並拒絕超出範圍的幾何設定或格式錯誤的色彩值,避免你不慎將壞掉的程式碼複製到正式環境。
原生 Input 或自訂 Div:CSS 究竟取代了什麼
用來取代瀏覽器核取方塊繪製的最低限度 CSS 已有完善文件。MDN 的 appearance 參考說明,appearance: none 會移除平台原生樣式,讓作者能加以取代;W3C 的 CSS Basic User Interface Level 4 規格則在標準層級定義了同樣的行為。搭配 Safari 使用的 -webkit-appearance: none,這個單一宣告正是讓自訂樣式化得以實現的關鍵。在此之後,就只是處理方塊、邊框與勾號的一般 CSS。
誘人之處在於跳過原生 input,直接改用 div。這麼做會迫使你用 class 切換來模擬勾選狀態、用 JavaScript 處理鍵盤啟動,並透過 ARIA 向螢幕閱讀器說明角色。原生 input 早已正確完成這些事;用 appearance: none 抑制其視覺呈現,既保留了上述所有行為,又能讓你重新設計方塊、勾號與焦點外框。
如果你真正在意的是讓核取方塊在不同作業系統之間呈現一致的外觀,那麼原生 input 的做法也是唯一能在 Windows 高對比與強制色彩等使用者設定下存活的方式。自訂 div 預設就會失去這項相容性。
產生器的輸入欄位及其有效範圍
CSS Checkbox Generator 公開六個輸入欄位:方塊大小、邊框寬度、圓角半徑、強調色、背景色,以及勾號顏色。每個欄位都有產生器強制執行的嚴格範圍,因此你複製出來的 CSS 必定在內部保持一致。在開始拖動滑桿之前,值得先了解確切的邊界。
| 輸入 | 可接受的值 | 備註 |
|---|---|---|
| 大小 | 16 到 64 px(整數像素) | 包含可見邊框,因為輸出設定了 box-sizing: border-box。 |
| 邊框 | 1 到 6 px(整數像素) | 決定圍繞方塊的可見描邊。 |
| 圓角半徑 | 0 到 50% | 在 50% 時,任何支援的大小下都會變成正圓。 |
| 強調色、背景色、勾號 | 僅限 6 位數 HEX(不接受簡寫、不接受 RGB) | 瀏覽器的色彩選擇器與數值控制項只會提供有效值;格式錯誤的色彩會被拒絕。 |
這份嚴格是有意為之。在需要整數的地方出現小數、不完整的 HEX 值,以及超出範圍的幾何設定,都會產生誤導性的程式碼,因此產生器會直接拒絕。實際上,這代表唯一能從工具得到壞掉值的方式,是事後手動編輯複製出來的 CSS,一旦這麼做,任何呈現問題都得由你自己除錯,而非工具的責任。所有運算與複製皆完全在當前瀏覽器分頁中進行,無需帳號、上傳、樣式表服務,也不會儲存設計狀態。
逐步為原生核取方塊套用樣式
- 在瀏覽器中開啟 CSS Checkbox Generator。一切都在當前分頁執行;不涉及帳號、上傳或儲存的設計狀態。
- 將方塊大小設為 16 到 64 px 之間、邊框設為 1 到 6 px 之間、圓角半徑設為 0 到 50% 之間。即時預覽會在你調整任何數值時更新,因此你可以在不先確定數字的情況下並列比較。
- 使用瀏覽器的色彩控制項挑選三種顏色:強調色(用於已勾選填色與 focus-visible 外框)、背景色(未勾選的填色),以及勾號顏色(以 ::after 虛擬元素繪製的旋轉標記)。三者都必須是 6 位數的 HEX 值,例如 #1f6feb。
- 點擊方塊或其預覽 label,確認勾選與未勾選兩種狀態都如你所預期地呈現。預覽採用範圍限定為 lizely-checkbox 的 class,套用與正式環境完全相同的產生樣式表,因此你看到的正是實際會呈現的結果。
- 複製 CSS 區塊並貼入你的樣式表。如需不同命名空間可重新命名 class,但請保留結構要件:box-sizing: border-box、cursor: pointer、供虛擬元素使用的相對定位,以及 :focus-visible 外框規則。
- 複製 HTML 區塊,並將範例中的 label 文字替換為你實際表單選項的措辭。請將 input type="checkbox" 保留在 label 元素內,如此一來點擊範圍、可存取名稱與鍵盤焦點皆無需額外屬性即可正常運作。
- 在目的表單中,根據實際周圍背景,測試 Tab 順序、Space 鍵啟動,以及 focus-visible 外框。若你的主題需要與頁面不同的對比,可在自有樣式表中調整外框顏色或寬度。
如果你使用框架,請依框架需求將 class 改為 className,並串接 checked 與 onChange,但請勿以 div 取代原生 input,也不要將 label 關聯移出包裹的 label 之外。這兩個結構上的選擇,正是讓核取方塊維持無障礙的關鍵。輸出的 HTML 刻意不包含任何內嵌腳本;核取方塊狀態由瀏覽器與外層表單負責管理。
使用虛擬元素自訂勾號
勾號本身值得單獨討論,因為它是多數手寫的 CSS 核取方塊教學最容易出錯的部分。CSS Checkbox Generator 僅以單一 ::after 虛擬元素繪製勾號,且該元素只有在 :checked 為 true 時才可見。其寬度、高度與邊框粗細皆依所選方塊大小縮放,並設有最小值,以確保在最小支援尺寸 16 px 時仍清晰可辨。
有三處細節屬於刻意的產品決策,而非通用規則。第一,勾號僅使用右側與底部邊框,藉此在不使用 SVG 的情況下呈現經典的打勾形狀。第二,虛擬元素旋轉四十五度,並依比例偏移定位,使方塊放大時勾號仍維持居中。第三,邊框粗細與方塊大小成比例,因此勾號在 64 px 時絕不會顯得太細,在 16 px 時也不會顯得太重。在特殊的縮放等級、裝置像素比或極端邊框設定下,反鋸齒可能使其中一側邊緣看起來略重,這屬於呈現上的假影,並非錯誤。
若你想調整這些比例,例如更粗的勾號或不同角度,請在自有樣式表中編輯複製出來的 CSS,而不是期望產生器開放新的選項。這些比例受工具內部的嚴格字串與幾何測試保護,並非以外部規範的方式呈現,因此最理想的工作流程,是將產生器的輸出視為起點,再從中進一步調整。
Accessibility Checks That Belong in Your Real Form
A visually attractive checkbox is not automatically accessible. The generator handles unchecked, checked, and :focus-visible styling, and the embedded preview is an honest reflection of those three states. It does not simulate indeterminate, invalid, required, disabled, read-only, high-contrast, or forced-colors states. Those have to be added and verified in the destination form using real content.
| Concern | Covered by the generator | Needs manual work in the form |
|---|---|---|
| Unchecked, checked, focus-visible styles | Yes | Confirm outline contrast against the actual page background. |
| Disabled, invalid, required, indeterminate | No | Add via framework primitives and verify with assistive tech. |
| Keyboard navigation (Tab, Space) | Native input keeps it | Test real Tab order and instructions in the live form. |
| Forced colors (Windows High Contrast etc.) | Browser decides | Verify and avoid suppressing overrides without a strong reason. |
| 200% zoom and small viewports | Box sizing scales | Confirm the mark stays legible and the click target is usable. |
The minimum checklist before shipping is short. Tab through the form and confirm the focus-visible outline appears on the checkbox itself, not skipped past it. Press Space on a focused checkbox and confirm the checked state toggles without a click. Check the contrast of the focus indicator against the surrounding background, not just the box; the Color Contrast Checker is the right tool for that step. Render the form at 200 percent zoom and confirm the mark remains legible. Toggle Windows High Contrast or macOS Increase Contrast and confirm forced colors do not destroy the control. The MDN appearance reference and the W3C CSS UI spec explain why operating systems are allowed to override custom colors, and that behavior is often worth keeping rather than fighting.
If any of those checks fail, fix the surrounding form rather than rewriting the generated stylesheet. The CSS Checkbox Generator's job is to give you a clean native baseline that preserves a real input type="checkbox" with an accessible label relationship; the form's job is to provide context, instructions, and error handling around it.
Related reading: How to Use Cubic Bezier CSS for Custom Easing.
Related reading: CSS Create Toggle Button With Exact Geometry.