任務路徑 / 從輸入到結果
如何設計自訂 CSS 核取方塊
- 01
設定控制項尺寸
勾形依邊框內部空間縮放，而非外部尺寸。預覽與匯出採用相同 CSS 邊框形狀。可點擊預覽，或聚焦後按空白鍵切換原生勾選狀態。
- 02
塑造外框
控制項支援 18–64 px，邊框支援 1–8 px。邊框內部至少保留 8 px 容納勾形；無效組合會清空預覽並停用匯出。
- 03
挑選狀態顏色
用「邊框顏色」設定靜止態的輪廓，用「勾選顏色」設定填滿態，然後切換「顯示勾選狀態」，在即時預覽中比較兩種狀態。
- 04
預覽兩種狀態
切換「顯示選中狀態」，在即時預覽中對比靜置和填滿兩種形態。勾選標記會在 160 ms 內以小幅放大過渡進入——這正是匯出的 CSS 在兩種狀態間重現的動畫。
- 05
複製或下載 CSS
點「複製 CSS」，或點「下載 .css」儲存 toolars-checkbox.css。規則集保留了底層的真實 input——appearance: none 只是重新繪製外觀——並附帶 :focus-visible 與 :disabled 狀態樣式。
- 06
保持原生標記
把 .checkbox 類別直接用在真實 input 元素上，並像對待任何核取方塊一樣搭配 label。鍵盤焦點、點擊行為和輔助技術播報都能正常運作，因為沒有替換任何語意。靜置時的白色背景是規則的一部分，因此空態在有底色的表面上也可讀。