纯CSS实现一个简单步骤条的示例代码


Posted in HTML / CSS onJuly 15, 2022

前言

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

效果

纯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,结果如下(步骤节点可以纵放或者横放)

纯CSS实现一个简单步骤条的示例代码

  • 然后就是链接每两个步骤节点之间的部分,链接部分的前后步骤节点都完成的话,那么相应的链接部分也应该亮起。假如step-2完成了,那么step-1step-2之间的链接部分也应该改变颜色,与其他未完成部分分开。
  • 也就是说,每个步骤完成时,与上一个步骤的链接部分需要改变颜色;链接部分受控于链接末端的步骤,所以最好使用label标签或者末端步骤的伪元素实现,本文使用before实现:
.step-node::before {
  content: '';
  position: absolute;
  /* 向上方移动,确定链接两个步骤 */
  top: -17px;
  left: 25px;
  height: 18px;
  width: 10px;
  background-color: #a3a3a3;
}

纯CSS实现一个简单步骤条的示例代码

  • 然后就是当末端步骤完成(被选中)时,改变自身和与上一个步骤链接部分的颜色:
/* 链接部分 */
.step-node:checked:before {
  background-color: #ca8a04;
}
/* 自身样式更改 */
.step-node:checked::after {
  background-color: #fbbf24;
  color: #ca8a04;
}

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

纯CSS实现一个简单步骤条的示例代码

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

纯CSS实现一个简单步骤条的示例代码

现在是可以跳过第二步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;
}

 到此这篇关于纯CSS实现一个简单步骤条的示例代码的文章就介绍到这了,更多相关CSS步骤条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 #HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 #HTML / CSS
使用HBuilder制作一个简单的HTML5网页
使用CSS定位HTML元素的实现方法
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 #HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 #HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 #HTML / CSS
You might like
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PHP实现简单登录界面
2019/10/23 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
Node.js实现文件上传的示例
2017/06/28 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python 导入数据及作图的实现
2019/12/03 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
基于python实现复制文件并重命名
2020/09/16 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
企业车辆管理制度
2014/01/24 职场文书
六个一活动实施方案
2014/03/21 职场文书
个人合作协议书范本
2014/04/18 职场文书
教室布置标语
2014/06/26 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
电影开国大典观后感
2015/06/04 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
PHP中多字节字符串操作实例详解
2021/08/23 PHP
MySQL创建管理HASH分区
2022/04/13 MySQL