本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
HTML
中的input
是一个十分强大的标签,配合上CSS
,在一定程度上基本可以代替部分JS
控制。
最近在搞一个步骤条,于是乎,想着使用CSS
给做出来,本文记叙实现的基本思路。
效果
代码
- 首先,使用
<input type="checkbox" />
实现作为步骤的元素,然后,按照顺序将每一个步骤排好位置,接着借用其他元素对checkbox
进行美化;都是比较常规的处理,这部分不再赘述。
整体布局如下:
<div class="steps">
<input type="checkbox" class="step-node" data-name="step-1" />
<input type="checkbox" class="step-node" data-name="step-2" />
<input type="checkbox" class="step-node" data-name="step-3" />
<input type="checkbox" class="step-node" data-name="step-4" />
<input type="checkbox" class="step-node" data-name="step-5" />
</div>
加上css
,结果如下(步骤节点可以纵放或者横放):
- 然后就是链接每两个步骤节点之间的部分,链接部分的前后步骤节点都完成的话,那么相应的链接部分也应该亮起。假如
step-2
完成了,那么step-1
和step-2
之间的链接部分也应该改变颜色,与其他未完成部分分开。
- 也就是说,每个步骤完成时,与上一个步骤的链接部分需要改变颜色;链接部分受控于链接末端的步骤,所以最好使用
label
标签或者末端步骤的伪元素实现,本文使用before
实现:
.step-node::before {
content: '';
position: absolute;
/* 向上方移动,确定链接两个步骤 */
top: -17px;
left: 25px;
height: 18px;
width: 10px;
background-color: #a3a3a3;
}
- 然后就是当末端步骤完成(被选中)时,改变自身和与上一个步骤链接部分的颜色:
/* 链接部分 */
.step-node:checked:before {
background-color: #ca8a04;
}
/* 自身样式更改 */
.step-node:checked::after {
background-color: #fbbf24;
color: #ca8a04;
}
至此就基本实现步骤的功能:
- 然而,步骤必须按顺序完成,不能跳过某个步骤完成下一个步骤。
现在是可以跳过第二步step-2
完成第三步step-3
,这显然不对,需要对步骤的点击事件进行处理。一般这种逻辑都得JS
帮忙进行处理,但CSS
其实也可以模拟。
只要添加一个z-index
较高的遮罩,挡住所有的步骤节点,就可以实现无法点击的功能;然后将当前可以点击的步骤节点的z-index
设置为最高,就可以恢复点击效果。 添加遮罩如下:
.steps::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
}
添加完遮罩之后,就无法再点击任何步骤节点了。
接下来,就是可以点击的节点样式,可以点击的步骤节点就是所有被选中checkbox
之后的第一个没有被选中的checkbox
:
.step-node:checked + .step-node:not(:checked)::after {
z-index: 10;
}
但是一开始并没有的被选中的步骤节点,上面的样式自然也就不会生效;那么一开始自然就是第一个步骤节点可以点击了:
.step-node:first-of-type:after {
z-index: 10;
}
/* 被选中之后,取消层级,变会不可点击 */
.step-node:checked:after {
z-index: 0;
}