若要產生 CSS 切換開關，請將原生 HTML 核取方塊樣式化並巢套於可見的標籤文字中，然後根據輸入的勾選狀態，以純粹的 CSS 驅動可見的軌道和旋鈕。軌道寬度減去軌道高度等於旋鈕勾選狀態的移動距離，這能在切換開關兩端保留相同的內距。這個單一公式能讓幾何關係保持誠實：旋鈕等於軌道高度減去兩倍內距，位移等於寬度減去高度。有了這兩個值，內距加上旋鈕大小加上移動距離永遠會等於寬度減去內距，因此關閉位置和開啟位置看起來對稱，無需任何手動微調。一個接受整數像素輸入和嚴格六位數 HEX 顏色的產生器可以自動套用該數學運算，並產生同步的 CSS 和可存取的 HTML，讓您避免最常見的失敗模式 —— 旋鈕漂離軌道，或切換開關無法用鍵盤操作。最終的控制項可免費繼承勾選狀態、Space 鍵啟動、聚焦環和表單提交，因為底層元素仍然是輸入的原生核取方塊，而非模仿外觀的裝飾性 div。
為何使用原生核取方塊
以樣式化的 div 或 span 手動打造的切換開關在截圖中可能看起來不錯，但它無法提供原生核取方塊的勾選狀態、Space 鍵啟動、焦點或表單提交語意。一旦移除底層的核取方塊，您的程式碼就必須偽裝二元狀態、偽裝 Space 鍵按下、偽裝聚焦環、偽裝停用狀態，以及偽裝表單提交。每個偽裝都是一個真實輔助技術或內建瀏覽器功能可能默默失效的地方。建構在原生輸入之上則反過來：瀏覽器保留所有基本功能，而您的 CSS 只負責描述外觀。
這就是 CSS 切換開關產生器背後的設計理念。這個工具並非發明新的小工具。它使用 appearance: none 隱藏原生繪製 —— 如 MDN appearance 參考文件 所述 —— 然後以軌道和旋鈕取代它，同時輸入保留其勾選狀態、Space 鍵啟動、原生聚焦環，以及在任何周圍表單中的角色。可見的標籤文字巢套了輸入，因此整個標籤區域保持可點選，且控制項無需額外的 ARIA 連線即可擁有可存取的名稱。當真實使用者透過 Tab 鍵切換到該開關並按下 Space 時，平台會處理該動作；樣式僅更新視覺效果。
由此衍生兩個結果。首先，原生輸入提供勾選狀態、Space 鍵啟動、焦點和表單提交。其次，在 React、Vue 或其他框架中的受控狀態連線，當 checked 和 change 處理函式不相符時可能會破壞原生互動，因此在整合後請重新測試鍵盤操作。應用程式仍然負責持續性、網路呼叫和樂觀回復，但小工具本身不必假裝成它不是的東西。
產生器為您計算什麼
產生器的品質來自它所揭示的數學運算。三個整數 —— 軌道寬度、軌道高度和內距 —— 完整描述幾何關係。兩個衍生值 —— 旋鈕直徑和旋鈕移動距離 —— 由輸入得出。您複製的 CSS 以純像素宣告包含這些數字，因此幾何關係保持可審查，而非隱藏在元件相依性中。
| 輸入 | 範圍 | 規則 |
|---|---|---|
| 軌道寬度 | 36 至 120 px | 僅限整數像素 |
| 軌道高度 | 20 至 64 px | 僅限整數像素 |
| 內距 | 2 至 8 px | 必須在軌道內留下正值的旋鈕 |
| 持續時間 | 0 至 2000 ms | 整數毫秒；設為零會停用插值 |
| 關、開與旋鈕顏色 | 6 位數 HEX | 嚴格格式；無效輸入會被拒絕 |
| 寬度與高度 | 寬度至少比高度大 8 px | 保持開啟與關閉位置在視覺上有所區別 |
此工具將旋鈕大小計算為高度減去兩倍內距，因此 32 px 的軌道搭配 4 px 內距會產生 24 px 的圓形旋鈕。它將移動距離計算為寬度減去高度，因此 64 px 寬、32 px 高的軌道在勾選時會移動 32 px。內距位於任一狀態下軌道的兩端，這就是為什麼關閉和開啟位置看起來對稱而無需任何額外微調的原因。軌道使用等於其高度一半的藥丸形邊框圓角，而圓形 ::after 旋鈕使用其自身大小的一半作為圓角，因此圓角和圓形與所選尺寸保持一致。純邏輯會拒絕任何會產生負值大小或旋鈕超出軌道的組合，而非默默地輸出損壞的結果。
如何使用此工具產生 CSS 切換開關
- 開啟 CSS 切換開關產生器，並將軌道寬度設定在 36 至 120 px 之間、軌道高度設定在 20 至 64 px 之間，保持寬度至少比高度大 8 px，以確保兩個位置易於閱讀。
- 選擇 2 至 8 px 之間的內距。工具會將旋鈕大小計算為高度減去兩倍內距，任何會留下非正值旋鈕的內距都會被驗證器拒絕。
- 輸入三種顏色作為完整的六位數 HEX 值：一個用於關閉軌道，一個用於開啟軌道，一個用於旋鈕。產生器會拒絕任何並非剛好六個十六進位數字的輸入。
- 選擇 0 至 2000 ms 之間的持續時間，用於背景顏色和變形的共用過渡。將持續時間設為零會移除插值，同時保留相同的像素值，這對於減少動效果的覆寫很有用。
- 點擊預覽以切換軌道並標記輸入。透過 Tab 鍵切換到它並按下 Space，以確認原生鍵盤互動正常運作，然後再複製任何內容。
- 獨立複製 CSS 和複製 HTML；任一個剪貼簿請求可能被拒絕，而可見的程式碼仍可供手動選取。然後將範例標籤文字替換為簡潔的實際狀態，例如電子郵件通知或深色模式。保持輸入巢套在標籤內，這樣可點選區域和可存取名稱才會保持正確。
- 如果您打算在 React、Vue 或其他框架中使用該片段，請在需要時將 class 改為 className，但保持語意化的輸入和標籤關係不變。在連線任何受控勾選狀態後，再次測試 Space 鍵啟動和點擊切換，因為不相符的處理函式可能會悄悄破壞原生互動。
顏色、對比與開/關區別
三種顏色 —— 關、開和旋鈕 —— 承載了整個視覺故事，因此開啟顏色應該一眼就能讀取為肯定狀態。將中性關閉顏色與明顯不同的開啟顏色配對，該開啟顏色與旋鈕顏色之間需有足夠的對比，以保持圓形在兩種狀態下都清晰易讀。狀態絕不應僅透過顏色傳達，特別是當周圍的標籤很短時。如果標籤顯示深色模式且開啟顏色為藍色，那沒問題；如果標籤顯示通知且顏色色調相近，請新增明確的狀態文字或圖示，以確保含義不含糊。
對頁面背景（而非僅預覽背景）執行所選開啟顏色的對比檢查，因為相同的十六進位值可能在深色主題中消失，或在繁忙的焦點區塊中隱沒。常見的顏色與幾何錯誤指南 列出了挑選顏色時的典型陷阱，這些顏色在孤立檢視時看起來不錯，但在實際情境中會失敗。
輔助功能與框架整合檢查
複製片段後，請在實際頁面上（而非預覽中）執行相同的檢查。使用 Tab 鍵進入切換開關並確認 Space 鍵可切換狀態。確認 focus-visible 外框相對於您的頁面背景清晰可見，因為開啟顏色同時作為外框環，在預覽中突出的色調在不相關的主題中可能會褪色。將頁面縮放至 200% 並確認觸控目標保持可用。將系統切換至強制色彩模式和高對比模式，以確認軌道和旋鈕仍清晰可見。
產生的片段不包含 JavaScript，因為原生核取方塊狀態不需要它。此工具不會產生持續性、網路錯誤處理、分析、非原生小工具的 ARIA 狀態同步，或樂觀回復。這些責任仍由使用該工具的應用程式負責。如果切換開關觸發網路操作，視覺切換開關絕不能承諾未實際持續的變更 —— 待處理和失敗狀態屬於周圍 UI，而非 CSS 中。如果您的應用程式遵守 prefers-reduced-motion，請在產生器中將持續時間設為零，或在目標樣式表中將 transition-duration 覆寫為 0ms，以滿足要求減少動效果的使用者。
如果該片段被放入 React、Vue 或其他透過受控狀態連線 checked 的框架，不相符的處理函式可能會悄悄破壞原生互動。整合後，請在實際頁面上重新測試 Tab 和 Space 鍵，並重新測試標籤上的點擊，因為受控狀態連線是鍵盤支援最常退化的位置。生產環境的設定畫面也應讓停用的控制項易於理解，並將任何錯誤或說明文字與該欄位關聯，以保持視覺變更和語意狀態同步。
如需更深入的探討，請參閱 產生 CSS 三角形時重複相同的結果。