當軌道寬度至少大於軌道高度 8 像素、內距在軌道內留下正向的旋鈕，而且可見預覽與底層原生 HTML 核取方塊實際能驅動的狀態變更相符時，CSS 切換開關就會正確產生。CSS Toggle Switch Generator 會即時強制執行這些規則，並拒絕為無效的組合產生輸出。三種顏色都必須是完整的六位數 HEX 值，而產生器的輸出依賴原生核取方塊輸入上的標準 appearance: none 屬性，該屬性會移除瀏覽器預設的核取方塊繪製，同時保留勾選狀態、Space 鍵啟動、焦點以及表單送出——這正是 MDN 對 appearance 屬性所記載的行為。一旦這些規則成立，且可見預覽符合你的意圖，「正確」的範圍便會擴大到鍵盤導覽、相對於真實頁面背景的 focus-visible 對比、在 forced-colors 和 reduced-motion 設定下的行為，以及片段被放入 React 或 Vue 等框架後，點擊和 Space 鍵行為的一致性。

how do i make sure i generate css toggle switch correctly
確認你正確產生 CSS 切換開關

對產生的 CSS 切換開關而言，「正確」代表什麼

對於產生的切換開關而言，正確性的範圍比「CSS 能編譯」更廣。三個層面必須同時成立：

  • 幾何。旋鈕必須容納於軌道內，開啟與關閉位置在視覺上明確可辨，且其背後的數學以像素宣告透明呈現，而非隱藏在元件相依性中。
  • 原生語意。輸入仍是真正的 HTML 核取方塊，因此勾選狀態、Space 鍵啟動、焦點以及表單送出皆能持續運作，無需任何自訂的 ARIA 配線。
  • 產品行為。開關以文字傳達狀態、在 200% 縮放下仍可使用、在框架內保持鍵盤可操作，且在伺服器尚未確認設定時不會假裝已儲存設定。

CSS Toggle Switch Generator 就是依此定義打造。它不會產生需要你重新與 ARIA 同步的非原生 widget，也不會把幾何細節埋入第三方套件。寬度、高度、內距、持續時間以及三種顏色的像素值會直接寫入它所複製出來的 CSS，這代表 產生器的輸出可以逐行檢視，而非盲目信任。

幾何正確性：寬度、高度、內距、旋鈕與移動距離

幾何是最容易驗證的層面，因為產生器會揭露每個像素。數值輸入與最終的旋鈕位置遵循三條方程式：

  • 旋鈕大小 = 軌道高度 − 2 × 內距
  • 移動距離 = 軌道寬度 − 軌道高度
  • 軌道圓角半徑 = 軌道高度 / 2（膠囊形狀）

接受的範圍為：寬度 36–120 px、高度 20–64 px、內距 2–8 px，以及持續時間 0–2000 ms。寬度必須至少大於高度 8 px，使開啟與關閉位置在視覺上明確可辨。內距必須在軌道內留下正向的旋鈕，亦即高度 − 2 × 內距必須大於零。產生器會以邏輯拒絕無效組合，而非產生負值大小或漂浮於軌道外的旋鈕。

以軌道寬度 60 px、高度 32 px、內距 4 px 為例的計算過程：

  1. 旋鈕大小 = 32 − (2 × 4) = 24 px
  2. 移動距離 = 60 − 32 = 28 px
  3. 軌道圓角半徑 = 32 / 2 = 16 px
  4. 旋鈕圓角半徑 = 24 / 2 = 12 px
  5. 驗算：內距 + 旋鈕 + 移動距離 + 內距 = 4 + 24 + 28 + 4 = 60 px，等於軌道寬度。兩端的內距相同，這正是此數學設計所要保證的。

若你變更任何輸入，請對複製出來的 CSS 重新執行該運算。若總和不等於軌道寬度，代表產生器已拒絕你的組合，你不應取得可複製的片段。如需進一步了解這些規則背後的幾何數學，請參閱以精確幾何建立 CSS 切換按鈕。

輸入接受範圍硬性限制
軌道寬度36–120 px（整數像素）必須至少大於高度 8 px
軌道高度20–64 px（整數像素）其一半即為膠囊圓角半徑
內距2–8 px（整數像素）高度 − 2 × 內距必須大於 0
持續時間0–2000 ms（整數毫秒）0 代表完全移除補間
關、開與旋鈕顏色僅限六位數 HEX三色皆為必要；開啟顏色決定 focus-visible 外框

鍵盤、焦點與表單送出的正確性

由於產生器保留原生 HTML 核取方塊作為輸入，鍵盤契約來自平台而非你的 CSS。若要驗證，請以 Tab 鍵切換至該控制項並確認：

  • Tab 與 Shift+Tab 會將焦點移入與移出輸入，視為單一停駐點，與可見的軌道寬度無關。
  • Space 會切換狀態。點擊同樣會切換狀態，因為輸入巢套於可見的標籤文字內，使整個標籤區域皆可點擊。
  • Enter 會送出所屬表單，與其他核取方塊相同。
  • 螢幕閱讀器 會朗讀標籤與開啟或關閉狀態，因為輸入透過外層標籤取得可存取名稱。

原生 focus-visible 外框保留於輸入上，而非被移除，並以所選的開啟顏色上色，且與軌道保持偏移。此決策是有意為之：移除焦點環是自訂開關程式碼中最常見的無障礙回歸之一，而偏移的外框能在不依賴特定主題的情況下保持指示器可見。請以真實頁面背景驗證外框——在產生器預覽中突出的顏色，可能在深色主題或繁雜的產品頁面上消失。Color Contrast Checker 是確認焦點環在開關實際落處的任何表面上仍符合 WCAG 的快速方法。

軌道與旋鈕的色彩與對比正確性

三種顏色驅動可見的開關：關閉軌道、開啟軌道與旋鈕。三者皆需完整的六位數 HEX 值，產生器不接受三位數或八位數的簡寫。此嚴格要求可避免意外的回退顏色洩漏至正式環境。

除了輸入本身外，上線前有三個對比決策值得檢查：

  1. 旋鈕在兩種狀態下對軌道的對比。在關閉軌道上易讀的旋鈕，若兩色在色相上過於接近，可能在開啟軌道上消失。
  2. 焦點環對周圍頁面表面的對比。焦點環使用你所選的開啟顏色，因此請確認其在產生器預覽之外仍可清楚辨識。
  3. 開啟與關閉的辨識不僅依賴顏色。當相鄰的標籤文字無法讓狀態一目了然時——例如「Email notifications」未附上明確的開啟或關閉詞——請考慮加入明確的狀態文字，使螢幕閱讀器使用者與色盲使用者能獲得與其他人相同的資訊。

產生器不會加入 hover、active、disabled、invalid、loading 或 read-only 的呈現，因此正式的設定畫面應在文案中讓禁用的控制項易於理解、將錯誤或說明文字與欄位保持關聯，並在使用者尚未獲得明確回饋前避免翻轉伺服器狀態。

動效、減少動效與持續時間的正確性

持續時間接受 0 到 2000 之間的任意整數毫秒，且相同的值會搭配 ease 時間關鍵字同時套用於背景顏色與 transform。將持續時間設為 0 仍會在點擊時變更狀態——只是移除可見的補間。這在複製出來的 CSS 將落入已為所在列加上動畫的元件中、或設計系統希望預設為無動效時特別有用。

複製出來的基準樣式不含 prefers-reduced-motion 媒體查詢。若動效在你的情境中屬於裝飾性質，請在目的端樣式表的 reduced-motion 區塊內覆寫 transition-duration: 0，使開關仍可運作，但不對選擇停用動效的使用者播放動畫。

框架整合的正確性

產生器的片段不含 JavaScript，因為基本的核取方塊狀態不需要它。框架配線改變的是周圍的程式碼，而非片段的正確性，因此在整合後請重新驗證鍵盤契約：

  • 在 React 中，將 class 改為 className，並確認受控狀態配線——checked 與 onChange 不符，或在表單層級的值缺少 readOnly——不會破壞原生的點擊與 Space 鍵處理。
  • 在 Vue 中，請確認 v-model 會更新底層的布林值，且輸入仍是無障礙性的唯一真相來源。
  • 若狀態變更會觸發網路操作，請在此 CSS 之外處理 pending 與 failure 狀態。視覺上的開關絕不應承諾一個實際未保存的變更。

整合後，請以 Tab 鍵切換至該開關並按下 Space 鍵進行測試。若毫無變化，代表受控狀態配線已覆蓋原生輸入，而非與其協同運作。

在實際產品中驗證開關

一旦產生的 CSS 與 HTML 貼入實際產品，請在上線前依序執行以下檢查：

  • 狀態措辭。範例標籤「Enable feature」僅為佔位文字；請替換為實際的二值設定，例如「Email notifications」或「Dark mode」。當一次性動作按鈕或多選項目更為合適時，請勿使用切換開關。
  • 鍵盤操作。以 Tab 鍵切換至該項，按下 Space 鍵，並確認變更在視覺上與任何繫結狀態中皆持續生效。
  • 焦點對比。請以真實頁面背景（而非產生器預覽）檢查焦點環。
  • 縮放。在 200% 瀏覽器縮放下測試，並確認觸控目標仍可使用。
  • 強制色彩。驗證在 Windows High Contrast 或 forced-colors 模式下的行為。
  • 減少動效。若你已加入 reduced-motion 覆寫，請確認開關為直接切換而非播放動畫。
  • 持久化行為。確認當網路更新進行中、失敗與成功時，使用者所看見的內容。

正確性檢查清單

層級要驗證的項目如何驗證
幾何旋鈕大小吻合、開與關的位置分明、藥丸半徑等於高度的一半根據複製的 CSS 計算旋鈕大小、行程與邊框半徑
輸入語意保留原生 checkbox、label 包住 input檢查 DOM 並確認 input[type=checkbox]
鍵盤Tab 可聚焦、Space 可切換、Enter 可送出手動測試，並盡可能搭配螢幕閱讀器
聚焦框在實際頁面背景上可見，且使用 on 顏色視覺檢查加上對比度檢查
動畫遵守持續時間，必要時套用 reduced-motion 覆寫檢查 transition 規則，並開啟動畫設定進行測試
框架整合後原生互動仍可正常運作在實際頁面內測試 Tab 與 Space
狀態用詞標籤描述的是二元設定文案審查與無障礙稽核
持續性切換開關不會承諾尚未持久化的變更審查切換開關周圍的網路處理程式碼

若該表格中每一列都通過，你就正確地產生了 CSS 切換開關——外觀正確、原生語意正確，且圍繞該控制項的產品行為也誠實。產生器的角色是維持外觀與原生語意的正確性，其餘則是你的應用程式責任。

如果你正在權衡選項，如何在 CSS 三角形產生器中選擇方向對此有詳細說明。