CSS 切換開關產生器會回傳兩段同步的程式碼區塊 — CSS 與 HTML — 將原生 HTML 核取方塊樣式化為開/關切換開關的樣貌，並將每個尺寸以純像素值的形式暴露在輸出中。旋鈕直徑等於軌道高度減去兩倍內邊距，開啟狀態的位移等於軌道寬度減去軌道高度，而軌道的圓角半徑等於軌道高度的一半以形成膠囊形狀，同時圓形旋鈕則以其本身尺寸的一半作為半徑。這些都沒有隱藏在元件相依性背後 — 如果你在表單中更改一個數字，對應的宣告也會跟著改變。你在螢幕上看到的預覽就是將要貼上的程式碼，因此檢視結果等同於直接閱讀那些像素值。這個工具不包含 JavaScript、不會上傳你的輸入、不會保存任何狀態，也不會產生設定後端;這個切換開關純粹是一個外觀與原生互動層，必須由你的應用程式來驅動。

what result should i expect when i generate css toggle switch
CSS 切換開關產生器會回傳的內容

產生器交給你的輸出內容

CSS 切換開關產生器會產生三個具體的東西:由表單欄位驅動的即時預覽、一個 CSS 區塊、以及一個 HTML 區塊。每個區塊都是獨立的 — 複製其中一個並不會複製其他區塊 — 但在你調整輸入時，它們會保持同步。

預覽是一個真正可互動的控制項。點擊軌道或標籤會切換狀態，Tab 可聚焦原生輸入框，而 Space 則會切換它。該互動並非自訂 JavaScript 模擬;它是 CSS 僅重新繪製的原生核取方塊行為。因此當你詢問結果看起來如何時，預覽就是誠實的答案，而複製的程式碼能在你貼上的任何頁面中重現同樣的行為。

CSS 區塊是一個小型、具有具名選擇器的規則集。它會鎖定標籤軌道、圓形的 ::after 旋鈕、底層輸入框的勾選狀態，以及 focus-visible 輪廓。HTML 區塊則是一個包裹著單一 input 元素(type="checkbox")與可見文位元組點的 label。兩個區塊中都沒有 JavaScript。

輸入接受值控制項目
軌道寬度整數像素，36 至 120整體水平尺寸;設定開啟狀態的位移距離
軌道高度整數像素，20 至 64垂直尺寸;設定旋鈕直徑與膠囊半徑
內邊距整數像素，2 至 8靜止時旋鈕與軌道邊緣之間的空間
持續時間整數毫秒，0 至 2000背景顏色與變形的過渡長度;0 會關閉插值
關閉顏色六位數 HEX輸入框未勾選時的軌道背景
開啟顏色六位數 HEX勾選時的軌道背景;同時也用於 focus-visible 輪廓
旋鈕顏色六位數 HEX在兩端之間移動的 ::after 圓形

寬度必須至少比高度多八像素，如此開啟與關閉位置才能保持視覺上明顯可辨。顏色必須是完整的六位數 HEX — 不接受三位數或四位數的簡寫。無效的組合會在產生任何程式碼之前就以純邏輯被拒絕，因此你絕不會收到把旋鈕放在軌道外或設定負值的程式碼片段。

預覽幾何如何保持一致

幾何是輸出中最可預測的部分。三個簡短的方程式就完成了所有工作，而產生的 CSS 會將每個方程式以像素宣告的形式直接暴露出來供你閱讀。

  • 旋鈕尺寸 = 軌道高度 − 2 × 內邊距
  • 位移距離 = 軌道寬度 − 軌道高度
  • 軌道圓角半徑 = 軌道高度 ÷ 2(膠囊形狀)
  • 旋鈕圓角半徑 = 旋鈕尺寸 ÷ 2(正圓形)

以寬度 56、高度 28、內邊距 4 為例:

  • 旋鈕尺寸 = 28 − 2 × 4 = 20 px
  • 位移 = 56 − 28 = 28 px
  • 未勾選時:旋鈕位於左側內邊距處，距離邊緣 4 px
  • 勾選時:旋鈕向右位移 28 px 至寬度減去高度的位置
  • 內邊距 + 旋鈕 + 位移 = 4 + 20 + 28 = 52 px;寬度 − 內邊距 = 56 − 4 = 52 px — 兩端相符

最後一行正是讓設計感覺平衡的特性:同樣的內邊距值存在於關閉端與開啟端。如果你調整這三個維度中的任何一個，該關係會自動成立，因為 CSS 帶著相同的數字貫穿其中，而不是快取的版面配置。

過渡是套用至 background-color 與 transform 兩者的單一 ease 時間關鍵字，持續你選擇的時間。將持續時間設為零會移除可見的插值效果，但保留狀態變更 — 當你打算在目的樣式表中為 prefers-reduced-motion 覆寫動畫時相當有用。

依照以下步驟產生 CSS 切換開關

要快速了解這個產生器會產出什麼，最簡單的方式就是跑一遍這個工具所圍繞建置的相同三階段流程:設定輸入、預覽、複製、然後驗證。完整介面位於 CSS 切換開關產生器 頁面，完全在你的瀏覽器中執行。

  1. 使用表單欄位選擇軌道寬度、高度、內邊距、持續時間，以及關閉、開啟與旋鈕的顏色。留意每個值變更時預覽的更新 — 該預覽是由輸出將使用的相同方程式所建構。
  2. 確認幾何:檢查旋鈕在勾選狀態下能抵達右邊緣但不會過於擁擠，以及未勾選位置具有你所輸入的相同內邊距。如果旋鈕碰到任一邊緣，請增加寬度或減少內邊距。
  3. 使用兩個獨立的複製控制項分別複製 CSS 與 HTML。每個請求都會各自要求剪貼簿權限，因此其中一個被拒並不會封鎖另一個，而可見的程式碼仍可作為備援選取。
  4. 替換 HTML 內部的範例標籤文字 — 像 "Enable feature" 這種通用文字應改為你真正要暴露的二進位設定，例如 "Email notifications" 或 "Dark mode"。
  5. 將兩個區塊貼入目的樣式表與模板中。在框架中，視需要將 class 替換為 className，但保留 label 包住 input 的結構，讓整個標籤區域維持可點擊，並讓控制項具有可存取名稱。
  6. 在產品本身中驗證狀態措辭、鍵盤操作、聚焦對比、縮放、強制色彩、減少動畫，以及狀態保存行為。這些檢查都不內建於程式碼片段中。

複製的程式碼實際上包含什麼

CSS 區塊刻意保持精簡。你可以閱讀它產生的每個宣告，並預測各自的作用。

  • 套用於 label 元素的規則會設定軌道寬度、高度、背景顏色(關閉顏色)、膠囊形狀的圓角半徑、定位上下文，以及過渡屬性。
  • 套用於 input 的規則設定 appearance: none 以移除原生核取方塊的繪製，同時保留勾選狀態、Space 啟動、聚焦與表單送出。
  • 套用於勾選狀態選擇器的規則會將軌道背景顏色變更為開啟顏色。
  • 套用於 label 的 ::after 偽元素的規則會根據幾何方程式設定旋鈕的寬度與高度、旋鈕顏色、圓形圓角半徑、所選內邊距處的絕對定位，以及在勾選時將旋鈕位移寬度 − 距離的 transform。
  • 套用於 input 的 focus-visible 規則會保留一條從軌道偏移的可見輪廓，使用你所選的開啟顏色。

HTML 區塊更短:一個單一 label 元素，其中包含一個 type="checkbox" 的 input 與一個文位元組點。label 與 input 之間的關係讓整個可見區域都可點擊，並賦予控制項一個可存取名稱。文位元組點是範例與實際使用之間唯一會變動的部分 — 將 "Enable feature" 替換為真實的設定名稱。

關於用於隱藏原生核取方塊的 appearance 屬性的標準背景，位於 developer.mozilla.org/en-US/docs/Web/CSS/appearance 的 MDN 參考資料，以及位於 w3.org/TR/css-ui-4/#appearance-switching 的 CSS Basic User Interface Level 4 定義，皆描述了這個程式碼片段所依賴的相同原生行為。

產生器不會給你的東西

輸出是一個外觀與原生互動層。所有把切換開關從視覺控制項變成可用設定的部分都存在於其他地方，而產生器的合約對於這個邊界是明確的。在採用這個工具之前權衡該邊界的一個合理方式，是閱讀關於 判斷 CSS 切換開關是否適合 該使用情境的指南。

  • 由於基本的核取方塊狀態不需要 JavaScript，因此未包含任何 JavaScript。
  • 沒有應用程式設定邏輯、非原生小工具的 ARIA 狀態同步、分析、狀態保存、API 呼叫或樂觀回滾。
  • 沒有獨立的 hover、active、disabled、invalid、loading 或 read-only 呈現。
  • 沒有自動的深色主題處理 — 你挑選的顏色就是字面的 HEX 值。
  • 沒有媒體查詢 — 如果你需要 reduced-motion 的覆寫，請在目的樣式表中自行加入。

實際上的後果是，正式環境的設定畫面仍必須讓禁用的控制項易於理解、讓錯誤或說明文字與欄位保持關聯，並在使用者收到明確回饋之前避免變更伺服器狀態。這些都刻意不包含在程式碼片段中。

出貨前的驗證檢查清單

自訂切換開關需要超出有效 CSS 的無障礙與可用性檢查。請在產品中而非預覽中跑過這份清單，因為主題上下文、聚焦順序與螢幕閱讀器在真實版面中的行為會有所不同。關於 產生 CSS 切換開關時需要注意的細節 的指南更深入地涵蓋了其中數項。

  • 確認開啟與關閉不僅以顏色區分，特別是在相鄰文字未使狀態明確時。當後果重要時，加入明確的狀態文字。
  • 針對真實頁面背景測試對比。在這個預覽中明顯的顏色，可能在另一個主題中消失不見。
  • 以 Tab 切換到控制項並按下 Space 以確認鍵盤操作。在整合進 React、Vue 或其他框架後重複一次 — 受控狀態的接線若 checked 與 change 處理常式不相符，可能會破壞原生互動。
  • 驗證 forced-colors 模式與高對比模式。Windows 高對比會覆寫背景顏色，因此 focus-visible 輪廓與旋鈕對比便成為主要的線索。
  • 在手機縮放層級驗證觸控目標;可點擊的 label 有所助益，但較小的軌道高度會縮減安全區域。
  • 聆聽螢幕閱讀器的朗讀內容。原生核取方塊角色會自動提供 "on" 與 "off";將 label 文字替換為清楚的設定名稱，能使朗讀內容有用。
  • 如果狀態變更會執行網路操作，請在此 CSS 之外處理待處理與失敗狀態，而不是讓視覺切換開關承諾一個實際未保存的變更。