CSS 切換開關產生器會圍繞原生 HTML 核取方塊打造自訂的開關外觀，讓您可以設定軌道寬度、軌道高度、內距、轉場時間，以及關、開與旋鈕的顏色，同時預覽成果，接著複製出同步且具無障礙性的 CSS 與 HTML。使用它的決定通常歸結於一個問題：您的介面是否需要一個會持續存在的二值設定（例如電子郵件通知、深色模式或自動儲存），而且您希望它看起來像開關而不是預設的核取方塊？如果答案是肯定的，產生器就能省去反覆嘗試旋鈕尺寸、挑選像素精準的位移，以及對齊藥丸形軌道的麻煩，您完全不必自己撰寫幾何設定。如果答案是否定的——也就是您需要的是一次性觸發、多選項，或非二值的控制項——那麼按鈕、單選群組或樣式化的核取方塊通常會更合適，也能避免讓他們誤以為開關才是正確的元件。
何時 CSS 切換開關真的適合介面
切換開關是一種 UI 慣例，代表二值狀態（開或關、啟用或停用、允許或封鎖），而且必須立即生效並在多次會話間保持。使用它的決定取決於產品中幾個具體的訊號。請問問自己：這個設定是否剛好只有兩個結果？使用者是否預期新狀態會立即套用，而不是按下「儲存」按鈕後才生效？切換開關的後果是否不需要確認對話框就能還原？常見的例子包括通知偏好、淺色與深色主題選擇、位置分享，以及自動播放或自動儲存切換。當這些訊號吻合時，切換開關就符合使用者期待，也能減少在核取方塊與動作按鈕之間抉擇的摩擦。當上述任何一個訊號不符時，開關不是誤導使用者，就是隱藏了產品仍然需要的一個步驟。
何時應該選擇其他元件
當控制項不符合上述訊號時，開關就是錯誤的元件，而有三種情況特別適合採用其他元件。第一，一次性的動作（例如「傳送邀請」、「執行報表」或「刪除草稿」）應該放在按鈕上，因為開關暗示著一個實際並不存在的持續狀態。第二，三個或更多選項之間的選擇應該使用單選群組、下拉選單或分段控制項，因為開關會強加一個不自然的二值框架而遺失資訊。第三，具破壞性或難以還原的動作（例如刪除帳號）需要確認步驟，而這是開關無法提供的。產生器的文件說明得很清楚：當一次性動作按鈕或多選項選擇更為準確時，請勿使用開關，因為視覺上承諾的「持續性」會變成謊言。請把開關視為一個小巧且帶有強烈意見的 UI 元素，而非通用的二值指示器。
產生器接受的輸入與強制限制
產生器提供六個尺寸加上三個顏色，每個輸入都有嚴格的限制，以確保幾何設定保持有效。寬度接受 36 到 120 之間的整數像素，高度接受 20 到 64 之間的整數像素。寬度必須至少比高度多 8 像素，才能讓開與關的位置保持明顯區隔。內距接受 2 到 8 像素，且必須在軌道內留出正向的旋鈕空間。轉場時間接受 0 到 2000 的整數毫秒。三種顏色都必須是完整的六位數 HEX 字串，無效的組合會被純邏輯直接拒絕，而不會產生負值尺寸或跑出軌道外的旋鈕。設定值與程式碼不會被上傳、保留或傳送到元件產生服務；所有作業都在瀏覽器本地端執行，因此沒有任何外部伺服器會看到您的設定或產生的標記。
| 輸入 | 允許值 | 限制存在的原因 |
|---|---|---|
| 軌道寬度 | 36 到 120 px（整數像素） | 較小的開關不易點擊；較大的寬度會破壞藥丸形的幾何假設 |
| 軌道高度 | 20 到 64 px（整數像素） | 較小的高度無法容納可點擊的旋鈕；較大的高度會與文字行重疊 |
| 寬度與高度 | 寬度必須至少為高度 + 8 px | 確保開與關的位置明顯不同 |
| 內距 | 2 到 8 px | 在軌道內保留正向、可見的旋鈕 |
| 轉場時間 | 0 到 2000 ms（整數 ms） | 零會停用補間動畫；上限可避免 UI 過於遲緩 |
| 關、開、旋鈕顏色 | 完整的六位數 HEX | 嚴格的格式讓顏色選擇器在各種主題下都保持一致 |
如何產生、預覽與複製開關
從空白預覽到可用的 HTML 只有三個簡短階段，CSS 切換開關產生器同樣遵循從輸入到剪貼簿的順序。
- 設定軌道寬度、軌道高度、內距、轉場時間，以及關、開與旋鈕的顏色，同時透過點擊軌道或標籤來切換預覽，直到尺寸與配色看起來都正確。
- 分別複製 CSS 與 HTML，因為產生器會針對每個輸出獨立要求剪貼簿權限，即使拒絕提示，仍可手動選取顯示的程式碼。將範例中的標籤文字「Enable feature」替換為簡潔的實際狀態，例如「Email notifications」或「Dark mode」。
- 確認狀態用語、鍵盤操作（Tab 鍵聚焦、Space 鍵切換）、在實際頁面背景下的焦點對比、200% 縮放下的行為、強制色彩模式中的外觀、在 prefers-reduced-motion 下的行為，以及所選設定在實際產品中如何持續或失效。
解讀產生器輸出的幾何設定
複製的 CSS 中每個值都是像素宣告，因此可以直接檢視幾何設定，而不必藏在元件依賴之後。旋鈕大小等於軌道高度減去兩倍內距，而勾選狀態的位移等於軌道寬度減去軌道高度。由於內距加上旋鈕大小再加上位移可化簡為寬度減去內距，所以相同的內距在關閉狀態時位於左端，在開啟狀態時位於右端，無需額外微調。軌道使用等於高度一半的藥丸形圓角半徑，圓形 ::after 旋鈕則以自身大小的一半作為圓角半徑，背景顏色與 transform 共享所選的轉場時間，並搭配 ease 時間函式關鍵字。
範例：寬度 80 px、高度 40 px、內距 4 px：
- 旋鈕大小 = 40 - (2 x 4) = 32 px
- 位移 = 80 - 40 = 40 px
- 內距 + 旋鈕 + 位移 = 4 + 32 + 40 = 76 px，等於寬度 - 內距 (80 - 4 = 76)，確認兩端內距相等
將時間設為零會移除可見的補間效果而不改變狀態，這對於 reduced-motion 覆寫可能很有用，但複製的基準程式碼並未包含媒體查詢。如果動畫僅是裝飾性質，請在目的樣式表中將 transition-duration 覆寫為零，而非重寫片段，並將該覆寫與 prefers-reduced-motion 守衛搭配使用，讓要求較平靜介面的使用者也能看到即時轉場。
比較開關、核取方塊與按鈕
並排檢視這三個元件會有所幫助，因為差異本質上是在語意而非外觀。原生型態的核取方塊代表隨表單一起提交的二元選擇，這就是為什麼產生器即使在替換可見繪製後仍保留底層的 input 元素。開關是一個樣式化的核取方塊，意味著立即的持續性，所以範例標籤應描述產品可立即套用的真實狀態。按鈕是一次性觸發器，沒有隱含的狀態，這就是為什麼開關永遠不該用來取代「Send」、「Run」或「Delete」。當您能自信地把元件歸入這三類之一時，要自行樣式化核取方塊、使用此產生器或改用按鈕，就只是機械式的決定而非美學選擇。
貼上程式碼後的無障礙性與行為檢查
有效的 CSS 檔案並不等於具無障礙性的開關。請確認開與關的區別不僅依靠顏色，特別是當相鄰文字無法讓狀態一目了然時，並考慮在後果重要時加上明確的狀態文字。測試軌道、旋鈕與實際頁面背景之間的對比，再測試鍵盤順序，確保 Tab 鍵會聚焦至輸入框，Space 鍵能切換狀態。focus-visible 外框會保留在原生輸入框上，並使用所選的開啟顏色，從軌道偏移而非移除，因此請根據實際頁面背景驗證該外框——在預覽中明顯的顏色，可能在另一個主題中消失。同時測試觸控目標大小、螢幕閱讀器宣告、200% 縮放下的行為，以及在強制色彩或高對比模式中的外觀。MDN appearance 參考資料記錄了此片段所依賴的原生核取方塊行為，而 W3C CSS Basic User Interface 規範則定義了相關底層標準。
框架整合而不破壞原生互動
此片段是純 HTML，因此大多數框架只需要小幅重新命名即可接受。在 React 中，將 class 改為 className；在 Vue 模板中，同樣的屬性仍為 class，但若您的表單函式庫預期受控輸入，可能還需要綁定 checked。請保留 input 與 label 之間的語意關係，因為整個標籤區域都可點擊，且控制項具有無障礙名稱。在串接狀態後再次測試切換功能，因為受控狀態的管線若 `checked` 與 `change` 處理函式不相符，可能會破壞原生互動。若狀態變更會觸發網路操作，請在這段 CSS 之外處理擱置中與失敗狀態，讓視覺上的開關不會承諾一個其實沒有持續生效的變更。產生器不會產生 hover、active、disabled、invalid、loading 或 read-only 等樣式，因此正式環境的設定畫面應該讓停用的控制項易於理解、讓說明文字與欄位保持關聯，並避免在使用者收到明確回饋前改變伺服器狀態。若想更深入了解持續性如何存在於產生的 CSS 之外，請參考片段如何將狀態與樣式分開處理。
延伸閱讀：製作圓角或外框 CSS 三角形：產生器限制。