纯CSS-实现一个简单步骤条

前言

HTML中的input是一个十分强大的标签，配合上CSS，在一定程度上基本可以代替部分JS控制。最近在搞一个步骤条，于是乎，想着使用CSS给做出来，本文记叙实现的基本思路。

效果

代码片段

代码

1.首先，使用<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，结果如下(步骤节点可以纵放或者横放)：

2.然后就是链接每两个步骤节点之间的部分，链接部分的前后步骤节点都完成的话，那么相应的链接部分也应该亮起。假如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;
} 

至此就基本实现步骤的功能：

3.然而，步骤必须按顺序完成，不能跳过某个步骤完成下一个步骤。

.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;
}