纯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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 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
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
python中调试或排错的五种方法示例
2019/09/12 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
10个示例带你掌握python中的元组
2020/11/23 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
P/Invoke是什么
2015/07/31 面试题
团员的自我评价
2013/12/01 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
二年级小学生评语
2014/04/21 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
银行业务授权委托书
2014/10/10 职场文书
小班下学期幼儿评语
2014/12/30 职场文书