前言
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="c