CSS 切換開關是一個樣式化的開/關控制項,以原生 HTML 核取方塊為基礎建構,因此瀏覽器會持續處理勾選狀態、Space 鍵啟動、焦點以及表單送出。最常見的錯誤出現在開發者跳過原生核取方塊、以 display:none 將其隱藏(這會破壞無障礙功能)、選用會讓旋鈕跑到軌道外側的尺寸,或是僅以顏色作為唯一的開/關信號時。一個可預測地避免這些錯誤的方式,是一次同時產生外觀,並複製 CSS 與 HTML。CSS 切換開關產生器會以軌道高度減去兩倍內邊距來計算旋鈕直徑,並以寬度減去高度來計算勾選時的移動距離,因此軌道兩端能維持相同的內邊距。由於原生輸入欄位保留在標記中,鍵盤使用者仍可透過 Tab 鍵移至此控制項並按下 Space 鍵,而且 focus-visible 輪廓仍會保留在真實的輸入欄位上,而非裝飾用的 span。後續章節將說明正確的設定方式、產生器所強制執行的限制,以及貼上程式碼後應執行的檢查項目。
CSS 切換開關的錯誤通常從哪裡開始
大多數切換開關的錯誤可分為三類。第一類是幾何問題:選擇的軌道高度與內邊距讓旋鈕沒有空間,或是寬度與高度過於接近,使開與關的位置看起來相同。第二類是語意問題:使用 div 與 span 來建構控制項,卻忘記切換開關是個二進位表單欄位,這表示它必須能送出、支援 Space 鍵,並朗讀其狀態。第三類是視覺提示:將明顯的「開」顏色配上幾乎相同的「關」顏色,或是完全省略任何焦點樣式。產生器透過強制使用整數尺寸、嚴格六位數 HEX 顏色,以及原生且含標籤的核取方塊,來迴避上述每個問題,因此最糟糕的錯誤類別永遠不會進入剪貼簿。
另一個隱而不顯的錯誤,是把視覺上的切換開關當成資料的擁有者。CSS 並不會保存任何狀態,僅負責繪製。設定值、伺服器狀態、錯誤復原與分析追蹤仍然屬於應用程式。以切合實際的限制來產生程式碼只是第一步。在真實頁面中驗證控制項,才是真正完成整個流程。
在產生器中設定切換開關
- 開啟 CSS 切換開關產生器,並輸入軌道寬度(36 到 120 之間的整數像素)與軌道高度(20 到 64 之間的整數像素)。請讓寬度至少比高度多出八個像素,以確保開與關在視覺上有明顯區別。
- 選擇介於 2 到 8 像素之間的內邊距。內邊距必須為軌道內的旋鈕保留正值空間,也就是說高度減去兩倍內邊距必須大於零。
- 選擇介於 0 到 2000 毫秒之間的整數過渡時間。將時間設為零會移除可見的補間動畫;若需為特定使用者停用動畫,請在目標樣式表中加入 reduced-motion 媒體查詢。
- 為「關」顏色、「開」顏色與旋鈕顏色輸入完整的六位數 HEX 值。產生器會在您看到損壞的幾何結果之前,先拒絕無效的組合。
- 點擊預覽軌道或其標籤來切換狀態,並確認旋鈕移動到預期距離。鍵盤使用者應能透過 Tab 鍵移至輸入欄位並按下 Space 鍵;複製前請先驗證兩者皆可運作。
- 分別複製 CSS 與 HTML,接著將範例標籤 Enable feature 替換為簡潔且真實的二進位設定,例如 Email notifications 或 Dark mode。
- 將兩個區塊貼入您的專案,並在合併前執行下一節的驗證清單。
產生器的限制與其背後的幾何原理
下列限制是由產生器自身的驗證機制所強制執行的。這些限制並非隨意設定,而是為了讓產生的 CSS 無法產生負值大小或讓旋鈕跑到軌道外側。
| 輸入 | 接受的範圍或格式 | 原因 |
|---|---|---|
| 軌道寬度 | 整數像素,36 至 120 | 移動距離為寬度減去高度,因此下限可確保開與關的位置在視覺上有明顯區別。 |
| 軌道高度 | 整數像素,20 至 64 | 定義套用內邊距後的最大旋鈕尺寸。 |
| 內邊距 | 整數像素,2 至 8 | 旋鈕大小等於高度減去兩倍內邊距,因此內邊距必須為軌道內的旋鈕保留正值空間。 |
| 過渡時間 | 整數毫秒,0 至 2000 | 設為零會在不改變狀態的前提下移除可見的補間動畫。 |
| 「關」、「開」與旋鈕顏色 | 僅接受六位數 HEX | 嚴格的格式可防止部分值損壞預覽或輸出結果。 |
| 寬度與高度的關係 | 寬度至少比高度多出 8 像素 | 保留勾選與未勾選位置之間的視覺差異。 |
以寬度 60、高度 30、內邊距 4 為例的計算過程:
旋鈕大小 = 高度減去 (2 倍內邊距) = 30 減去 8 = 22 像素。 移動距離 = 寬度減去高度 = 60 減去 30 = 30 像素。 軌道兩端的內邊距:4 (左側內邊距) 加上 22 (旋鈕) 加上 30 (移動距離) 加上 4 (右側內邊距) = 60 像素,與軌道寬度相符。
由於產生的 CSS 會直接以像素宣告來呈現這些數值,因此您可以在自己的樣式表中檢視幾何設定,而非依賴隱藏的元件相依性。
在您的真實頁面中驗證控制項
貼上後,請執行下列檢查。產生器提供了可運作的基準,但您的真實頁面會變更背景、鄰近文字與焦點情境,而這些都可能隱藏在預覽中看不出來的問題。
- 確認 focus-visible 輪廓在您的實際頁面背景上仍然清晰可見。該輪廓使用「開」的顏色,並自軌道向外偏移,因此在單獨檢視時看起來明顯的顏色,在其他主題中可能會消失不見。
- 測試鍵盤順序。透過 Tab 鍵移至輸入欄位,按下 Space 鍵進行切換,並確認朗讀結果與視覺狀態皆會改變。
- 檢查「開」與「關」的區別是否超越顏色。若鄰近文字無法讓狀態一目了然,請加入明確的狀態文字或圖示,以免使用者僅依賴色相來判斷。
- 調整瀏覽器大小並將縮放比例調至 200%,以確認觸控目標仍然可用。由於輸入欄位位於可見的標籤內,軌道本身即可點擊,因此整個標籤區域皆會啟用該控制項。
- 切換至作業系統的強制色彩或高對比模式。原生核取方塊的行為會保留,但您的自訂顏色可能需要在目標樣式表中加入 forced-colors 覆寫設定。
- 在系統層級降低動畫效果。基準設定並不包含媒體查詢,因此對要求減少動畫的使用者,請在目標樣式表中將 transition-duration 覆寫為零。
- 在整合進 React、Vue 或其他框架後重新檢查。受控狀態的接線方式若與 checked 與 change 處理函式不匹配,可能會中斷原生互動。請在需要時將 class 改為 className,但請保留輸入欄位與標籤之間的語意關係。
即使產生後仍會失敗的模式
一段乾淨的 CSS 片段並無法解決產品層級的錯誤。該控制項不會自行儲存任何設定。若切換開關會觸發網路請求,視覺上的變更可能會在伺服器確認前就先顯示為已生效,而一旦更新失敗,UI 將與實際狀態不同步。請將待處理狀態與失敗處理移至與保存數值相同的程式路徑,並在發生錯誤時復原視覺狀態,而不是讓切換開關承諾一個實際上並未保存的變更。
當一次性動作按鈕或多選選擇更為準確時,請勿使用切換開關。送出按鈕不是切換開關,而具有三個選項的 select 也不是切換開關。產生器並不會額外加入 hover、active、disabled、invalid、loading 或 read-only 的樣式,因此實際的設定畫面必須在周圍的表單中處理這些狀態。特別是被禁用的控制項,應說明其被禁用的原因,而任何錯誤或說明文字都必須以程式化方式與輸入欄位保持關聯,而不是漂浮在附近。
關於底層標準,產生器用於移除預設核取方塊繪製的 appearance 屬性,可於 MDN 上查閱,並定義於 CSS Basic User Interface Level 4。請將這些參考資料視為原生核取方塊在移除 appearance 後仍執行的行為契約,如此一來您便能了解哪些行為是由瀏覽器保證,哪些行為是您必須自行實作的。
若想進一步了解,請參閱 避免在產生 CSS Cubic Bezier 時犯錯。