任務路徑 / 從輸入到結果
如何設計純 CSS 開關
- 01
設定軌道尺寸
把「軌道寬度」設在 44 到 128 px、「軌道高度」設在 24 到 64 px。寬度必須比高度大至少 8 px，滑鈕才有滑動的空間。
- 02
調適滑鈕
把「滑鈕尺寸」選在 16 到 56 px 之間。它必須能放進軌道內部——最大不超過軌道高度減 4 px——否則狀態會變為「檢查數值」並給出確切規則。
- 03
為兩種狀態配色
用「未啟用態軌道」設定關閉位置的顏色，用「啟用態軌道」設定開啟位置的顏色，然後切換「顯示啟用狀態」，預覽 180 ms 過渡的兩端。
- 04
預覽過渡效果
切換「顯示啟用狀態」，以真實的 180 ms 緩動時間觀看滑塊滑動和軌道變色。滑塊四周的內邊距按軌道剩餘高度的一半計算，所以在任何你選擇的尺寸下都保持均勻貼合。
- 05
複製或下載 CSS
點「複製 CSS」，或點「下載 .css」儲存 toolars-switch.css。標記結構由一個真實的核取方塊 input 和一個 .switch-track 元素配對而成，白色滑鈕會按計算出的行程在兩種狀態間滑動。
- 06
組裝標記
在 .switch 容器裡嚴格按此順序放置：一個核取方塊 input，後跟一個 .switch-track 元素——兄弟選擇器依賴這個順序。input 會縮成不可見的 1 px 方塊但仍可聚焦，聚焦時會用你的啟用軌道色繪製 3 px 外框。