純CSS-實現一個簡單步驟條

語言: CN / TW / HK

theme: devui-blue

本文已參與「新人創作禮」活動,一起開啟掘金創作之路。

前言

HTML中的input是一個十分強大的標籤,配合上CSS,在一定程度上基本可以代替部分JS控制。
最近在搞一個步驟條,於是乎,想著使用CSS給做出來,本文記敘實現的基本思路。

效果

程式碼片段

程式碼

  1. 首先,使用<input type="checkbox" />實現作為步驟的元素,然後,按照順序將每一個步驟排好位置,接著借用其他元素對checkbox進行美化;都是比較常規的處理,這部分不再贅述。 整體佈局如下: ```html

`` 加上css`,結果如下(步驟節點可以縱放或者橫放):
微信截圖_20220621170220.png

  1. 然後就是連結每兩個步驟節點之間的部分,連結部分的前後步驟節點都完成的話,那麼相應的連結部分也應該亮起。假如step-2完成了,那麼step-1step-2之間的連結部分也應該改變顏色,與其他未完成部分分開。
  2. 也就是說,每個步驟完成時,與上一個步驟的連結部分需要改變顏色;連結部分受控於連結末端的步驟,所以最好使用label標籤或者末端步驟的偽元素實現,本文使用before實現: css .step-node::before { content: ''; position: absolute; /* 向上方移動,確定連結兩個步驟 */ top: -17px; left: 25px; height: 18px; width: 10px; background-color: #a3a3a3; } 微信截圖_20220621171422.png
  3. 然後就是當末端步驟完成(被選中)時,改變自身和與上一個步驟連結部分的顏色: css /* 連結部分 */ .step-node:checked:before { background-color: #ca8a04; } /* 自身樣式更改 */ .step-node:checked::after { background-color: #fbbf24; color: #ca8a04; } 至此就基本實現步驟的功能:
    動畫2.gif

  4. 然而,步驟必須按順序完成,不能跳過某個步驟完成下一個步驟。 動畫2.gif
    現在是可以跳過第二步step-2完成第三步step-3,這顯然不對,需要對步驟的點選事件進行處理。一般這種邏輯都得JS幫忙進行處理,但CSS其實也可以模擬。
    只要新增一個z-index較高的遮罩,擋住所有的步驟節點,就可以實現無法點選的功能;然後將當前可以點選的步驟節點的z-index設定為最高,就可以恢復點選效果。 新增遮罩如下: css .steps::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9; } 新增完遮罩之後,就無法再點選任何步驟節點了。
    接下來,就是可以點選的節點樣式,可以點選的步驟節點就是所有被選中checkbox之後的第一個沒有被選中的checkbox: css .step-node:checked + .step-node:not(:checked)::after { z-index: 10; } 但是一開始並沒有的被選中的步驟節點,上面的樣式自然也就不會生效;那麼一開始自然就是第一個步驟節點可以點選了: ```css .step-node:first-of-type:after { z-index: 10; }

/ 被選中之後,取消層級,變會不可點選 / .step-node:checked:after { z-index: 0; } ```