纯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 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 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网站基础优化方法小结
2008/09/29 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
JavaScript 的继承
2011/10/01 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Django 批量插入数据的实现方法
2020/01/12 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
英国家用电器购物网站:Hughes
2018/02/23 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
高三语文教学反思
2014/01/15 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
优秀家长自荐材料
2014/08/26 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
义诊活动通知
2015/04/24 职场文书
毕业生政审意见范文
2015/06/04 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers