跳至主要內容
Lizely

CSS 切換開關產生器

產生一個可透過鍵盤操作的 CSS 切換開關，並精確設定軌道與旋鈕的幾何結構。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.設定軌道寬度、高度、內邊距、持續時間，以及開關與撥桿的顏色，同時切換預覽。
  2. 2.複製 CSS 與 HTML，然後將範例標籤替換為實際的二進位設定值。
  3. 3.請在產品中驗證狀態文字、鍵盤操作、焦點對比、縮放、強制顏色、減少動畫以及狀態保留行為。

關於CSS 切換開關產生器

CSS 切換開關產生器會在原生 HTML 選項框基礎上，打造自訂的開關外觀。可調整軌道寬度、高度、內邊距、過渡時間、關閉狀態顏色、開啟狀態顏色與旋鈕顏色。該工具會計算旋鈕直徑與勾選行程距離，提供真實互動預覽，並輸出同步的 CSS 與可訪問的 HTML。所有運作皆在瀏覽器本機/本機狀態完成，設定與程式碼不會上傳、儲存或傳送至任何元件產生服務。

範例保留輸入型別為「選擇框」，因為切換開關代表二元狀態。CSS 的外觀設定為「無」時會移除預設的選擇框繪製，但原生輸入仍支援勾選狀態、空格鍵操作、焦點與表單提交。輸入專案嵌入可見標籤文字中，因此整個標籤區域可點選，且控制元件擁有可訪問的名稱。請將「啟用功能」更換為具體的實際情境狀態，例如「郵件通知」或「深色模式」。請勿在情境中使用切換開關，若需單次操作按鈕或多選項選擇，應優先使用更合適的選項。

寬度接受從三十六到一百二十的整數像素。高度接受從二十到六十四的整數像素。寬度不得小於高度八像素，以確保開關與關閉狀態清晰可見。內邊距接受從二到八的整數像素，且必須確保旋鈕內部有正數空間。過渡時間接受從零到兩千的整數毫秒。三種顏色皆需輸入完整的六位十六進位值。不合法的組合將由純邏輯判斷拒絕，不會產生負數尺寸或旋鈕超出軌道範圍的結果。

旋鈕大小等於軌道高度減去兩倍的內邊距。在未勾選狀態下，旋鈕從所選內邊距開始。在勾選狀態下，透過 translateX 轉移移動至寬度減去高度。這些公式確保兩端皆有相同的內邊距，因為內邊距加上旋鈕大小再加上行程總和等於寬度減去內邊距。產生的輸出會直接以像素宣告呈現這些值，因此可直接檢視幾何設定，而不需隱藏在元件依賴背後。

軌道使用半徑等於其高度一半的橢圓邊框。圓形的 ::after 旋鈕使用其自身大小的一半作為半徑。背景顏色與轉換效果共享所選的過渡時間，並搭配 ease 過渡關鍵字。將過渡時間設為零可移除視覺插值，但狀態不變。此設定可用於減少動畫的過渡，雖然複製的基線並未包含媒體查詢。若動畫僅為裝飾性，或使用者請求減少動畫，建議在目標樣式表中將 transition-duration 設為零。

焦點視覺邊框仍保留在原生輸入上，並使用所選的開關顏色。此邊框偏移於軌道之外，而非移除。請確認邊框與實際頁面背景的對比，因為在預覽中顯眼的顏色可能在其他主題中消失。生成器不會新增懸停、活動、禁用、錯誤、載入或只讀狀態的呈現。生產環境的設定頁面應確保禁用控制元件的狀態清晰可讀，維持與欄位相關的錯誤或提示文字，並避免在使用者獲得明確反饋前改變伺服器狀態。

點選軌道或標籤來切換預覽。鍵盤使用者應能透過 Tab 選取並按 Space 鍵。在整合至 React、Vue 或其他框架後，請再次測試此行為；受控狀態的繫結可能會破壞原生互動，如果勾選狀態與變更處理函式不匹配的話。框架使用者可以將 class 改為 className，但語意上的輸入與標籤關係應保持不變。如果狀態變更執行了網路操作，請在這個 CSS 之外處理待處理與失敗狀態，而不是讓視覺開關的視覺提示誤導使用者以為變更已成功儲存。

獨立請求複製 CSS 與 HTML 的剪貼簿權限。狀態提示會顯示成功輸出內容，若拒絕權限則保留可見程式碼以便手動選擇。此範本中未包含 JavaScript，因為基本核取方塊狀態無需額外內容。此工具不產生應用設定邏輯、非原生元件的 ARIA 狀態同步、分析、持久化、API 呼叫或樂觀回滾機制。這些責任屬於使用該控制的產品本身。

自訂開關需進行超越有效 CSS 的可訪問性與使用者體驗測試。請確認開關與關閉狀態不僅僅透過顏色來區分，特別是當周邊文字無法清楚傳達狀態時。應測試對比度、鍵盤操作順序、縮放、觸控目標大小、螢幕閱讀器公告、強制顏色模式、高對比模式、禁用狀態以及任何非同步失敗情境。當後果重要時，建議加入明確的狀態文字說明。MDN 檔案說明瞭外觀與原生核取方塊的行為，而 CSS 基本使用者介面則提供標準定義。本處的尺寸計算公式與時間限制為本機選擇，由邊界、幾何與精確輸出測試覆蓋，並非宣稱為普遍設計規範。

方法與來源

驗證相容的整數尺寸與嚴格的十六進位顏色，計算撥桿大小為高度減去兩倍邊距，計算移動距離為寬度減去高度，保留原生標籤核取方塊，並保留焦點可見的樣式。

常見問題

為何將此控制實作為核取方塊？
原生核取方塊已能模擬二元狀態，並提供已選中狀態、空格鍵觸發、焦點與提交語意，這些是僅有裝飾性 div 所缺乏的。
撥桿的移動距離是如何計算的？
移動距離等於軌道寬度減去軌道高度，此計算方式結合撥桿大小後，能保留兩端的內邊距。
產生的程式碼會儲存設定嗎？
不會。它僅提供外觀與原生互動功能；你的應用程式必須負責儲存狀態、報告進行中的工作，以及從失敗更新中恢復。
我可以移除過渡效果嗎？
可以。將持續時間設為零，或在目標樣式表中加入減少動畫的媒體覆蓋，以關閉動畫。

相關工具

色彩工具 使用指南

查看全部