產生的 CSS 切換開關程式碼不會儲存設定值。CSS 切換開關產生器輸出的片段僅控制視覺外觀與原生核取方塊的互動行為，因此每次頁面載入時，開關都會回到底層表單狀態所指定的初始位置。持久化——也就是真正在使用者重新載入頁面、切換分頁或再次造訪時記住其開啟或關閉的選擇——是託管該表單的應用程式的工作，而非負責樣式設計的標記語言的工作。這種分離是有意為之，因為原生輸入元素本身並沒有任何機制可以儲存數值；它只是反映在提交當下 checked 屬性是否存在。由於計算機完全在您的瀏覽器端執行，從不將這些數字寫入儲存空間或傳送至後端，因此產生器同樣不會在造訪之間保留您的軌道寬度、高度、內距、持續時間或顏色選擇。任何整合此片段的人，都必須自行負責加入儲存、還原與錯誤處理邏輯，才能將樣式化的核取方塊轉化為一個會被記住的偏好設定。
產生的 CSS 切換開關程式碼實際上做了什麼
該片段會同時輸出兩個相互同步的部分：一組繪製藥丸形軌道與圓形 ::after 旋鈕的 CSS 規則集，以及用來包裝樣式、帶有標籤的核取方塊 HTML。設定 appearance: none 會移除預設的核取方塊繪製，隨後軌道會置於輸入元素的背後，而旋鈕則會在未選取時的內距位移與依所選幾何計算出的 checked translateX 位置之間滑動。由於底層元素依然是真正的 input type="checkbox"，因此成果會保留 checked 狀態、以 Space 鍵啟動、focus-visible 輪廓，以及瀏覽器已能理解的表單提交行為。調整 duration 數值會控制背景顏色與 transform 插值所需的時間長度，當值為零時就不會產生任何可見的動畫效果。片段刻意排除的則是 JavaScript、localStorage 寫入、Cookie 與伺服器呼叫——複製程式碼只會帶走樣式與原生互動語意，因此其餘的部分必須由外圍頁面自行補上。
為何這段片段無法自行儲存設定
原生核取方塊僅會儲存表單提交當下為真的狀態：瀏覽器回報 checked 或 unchecked，之後便會捨棄該值。輸入元素本身並沒有內建的記憶功能，因此為其加上樣式也無法改變這個事實。根據 MDN appearance 參考資料，重設平台樣式表只會改變控制項的繪製方式，並不會改變其行為。產生器會以像素宣告直接暴露尺寸，並將 on 位置留給 checked 屬性，這代表即使是一個樣式完美的切換開關，也遵循相同的規則——重新整理頁面會重設視覺狀態，直到有其他機制將它重新寫入標記、隱藏欄位或送往後端的請求中。計算機同樣在本機執行，並不會在造訪之間保留軌道寬度、高度、內距、持續時間或任何三種顏色，因此若想找回昨天的數字，唯一的方式就是在關閉分頁前先複製產生的程式碼。W3C CSS Basic User Interface Level 4 中的 appearance-switching 段落也明確指出同樣的分離：表現是可設定的，行為則否。
如何產生切換開關並複製片段
- 開啟 CSS 切換開關產生器，將軌道寬度設定在允許的 36–120 像素範圍內，再於 20 到 64 像素之間選擇軌道高度。請確認寬度至少比高度多出 8 像素，讓 on 與 off 位置在視覺上保持明顯區隔。
- 從 2 到 8 像素之間挑選一個內距值，確保軌道內部仍保有正向的旋鈕空間，接著為 off 顏色、on 顏色與旋鈕顏色輸入完整的六位數 HEX——不完整或非 HEX 的字串會被表單拒絕，而不會被默默四捨五入。
- 以 0 到 2000 之間的整數毫秒數設定過渡持續時間；將 duration 設為零可在不改變狀態的前提下停用動畫，並可作為 reduced-motion 的基準。按一下軌道或標籤切換預覽，讓您能在實際情境中判斷兩種位置的表現。
- 分別點擊 Copy CSS 與 Copy HTML 來請求剪貼簿存取權限。若瀏覽器拒絕剪貼簿權限，兩段程式碼仍會保留在畫面上，您可以手動選取並複製——拒絕絕不會隱藏輸出結果。
- 將 HTML 貼入您的表單中，並把範例的標籤文字替換為此切換開關實際控制的具體設定，例如「Email notifications」或「Dark mode」。請保留 input 嵌在 label 內部的結構，讓整個標籤區域都能被點擊，並維持控制項的無障礙名稱。若想更深入了解幾何設定，請參考 以精確幾何建立 CSS 切換按鈕。
持久化機制在應用程式中的歸屬
由於產生器在設計上刻意略過這份責任，一旦切換開關的結果具有實質影響，託管應用程式便會接手。請在伺服器端讀取表單提交結果，將最終的偏好寫入使用者設定資料表，並在下次表單渲染時把該值回填到 checked 屬性中。若採用 SPA 工作流程，請在 change 事件發生時儲存新狀態，接著由您自己的程式碼處理擱置中與失敗的路徑，如此一來視覺上的開關才不會承諾一個伺服器悄悄拒絕的變更。請思考當儲存空間無法使用、使用者在第二台裝置登入，或管理員從另一個分頁變更預設值時，應該如何反應——這些問題在 CSS 內部都找不到答案。一個小型的包裝函式通常會負責發送數值、設定「saving」狀態，並在發生錯誤時復原，這個邏輯可以很自然地與片段並存，而無須修改片段本身。將切換開關視為只負責外觀與無障礙功能，產品其餘部分就能在不與標記耦合的情況下持續演進。
工具所強制執行的輸入範圍與限制
表單會在本地端預先驗證每一個選擇，然後才接受整體組合，因此提前掌握邊界數字與背後的幾何公式會很有幫助：
| 輸入項目 | 可接受的範圍或格式 | 超出範圍時的處理 |
|---|---|---|
| 軌道寬度 | 整數像素，36–120 | 驗證機制會拒絕該值 |
| 軌道高度 | 整數像素，20–64 | 驗證機制會拒絕該值 |
| 寬度對高度 | 寬度至少為高度 + 8 | 位置重疊時會被拒絕 |
| 內距 | 整數像素，2–8 | 若造成旋鈕空間為負則會被拒絕 |
| 過渡持續時間 | 整數毫秒，0–2000 | 驗證機制會拒絕該值 |
| Off、on 與旋鈕顏色 | 僅接受六位數 HEX | 無效組合會被拒絕 |
幾何形狀由兩個簡短的公式構成：旋鈕大小等於軌道高度減去兩倍內距，而旋鈕的勾選位移則等於軌道寬度減去軌道高度。以寬 60 px、高 30 px、內距 4 px 的軌道為例，旋鈕直徑會是 30 − (2 × 4) = 22 px，切換時則會移動 60 − 30 = 30 px。這些方程式之所以能在兩端維持相同的內距，是因為內距加上旋鈕大小再加上位移可化簡為寬度減內距，這也是為什麼即使數字看起來有些特殊，視覺上的邊框依然保持對稱。軌道使用等於其高度一半的藥丸形 border-radius，而圓形 ::after 旋鈕則以自身尺寸的一半作為 radius，因此兩端能自然對齊，而非憑巧合達成。
正式上線切換開關前的驗證清單
在將片段導入實際的設定畫面前，請讓帶有標籤的範例通過合約所列的檢查。透過 Tab 鍵切換到該開關並按下 Space 鍵，確認鍵盤操作正常。切換離開後再切回，確認 focus-visible 輪廓使用的是所選的 on 顏色，且與軌道保持位移而非消失——請以實際頁面背景來驗證輪廓，因為在此預覽中明顯的顏色，在其他主題中可能會看不見。將頁面縮放至 200 percent，確認觸控目標仍可正常運作，且旋鈕不會落在手指大小的點擊區域內。將作業系統切換為強制色彩模式，確認在使用者代理覆寫您的顏色選擇時，軌道與旋鈕依然可以清楚區分。啟用 reduced-motion 偏好，並在產生器中將 duration 設為零，或在目標樣式表中將 transition-duration 覆寫為 0ms。完成上述所有步驟後，請在將片段接入 React、Vue 或任何框架之後重新測試同一組控制項，因為 value 與 change 處理函式若不相符，可能會在不知不覺中破壞原生互動。若切換開關的後果重大，且單靠顏色無法完整傳達意義，建議在開關旁加上明確的「On」與「Off」文字，特別是針對無法清楚辨識顏色差異的使用者。
若想更深入了解，請參考 CSS Before 三角形產生器：偽元素設定。