当前位置:网站首页>通过点击CheckBox实现背景变换小案例
通过点击CheckBox实现背景变换小案例
2022-08-03 12:07:00 【_rosy】
今天给大家介绍一个例子,例子是实现背景的切换的,这里通过使用input标签中的checkbox中的checked实现,我觉得还是一个不错的例子,分享给大家。
在看代码之前先介绍一些知识点:
CheckBox的伪类选择器:checked伪类仅仅适用于单选按钮或则复选框,所以如果在其他类型的元素定义checked伪类,checked会失效。
css中 ‘+’号的使用:
- 二者有相同的父元素,
- 选择紧接在另一个元素后的元素,即是相邻的选择器
总结上面两点,当checked伪类选择器和+配合使用时 :+ 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。也可以理解为在为类选择器选择的时候,使用原始的
input:checked+class/label
(每当选中时,改变其后class/label中的内容样式)
本案例通过点击checkbox实现选择效果,点击了第一下表示选中了这个id叫modeCheckBox的多选框,此时显示黑夜,内容为月亮标记,再点一下表示取消选择,恢复为默认的太阳。
OK知识点介绍完毕,下面你们就直接copy代码去浏览器上面跑一跑吧,感受一下css的奇妙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="modeCheckBox" type="checkbox">
<!-- 通过点击,记住勾选和不勾选的两个状态,刚好对应浅色模式和深色模式两种状态 -->
<div class="content">
<label id="modeBtn" for="modeCheckBox">点我切换</label>
<h1>深浅色模式切换</h1>
</div>
</body>
</html>
<style>
body,
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
box-sizing: border-box;
}
.content {
padding: 10px;
transition: background-color 1s, color 1s;
}
#modeCheckBox {
display: none; /*//将大盒子外面的checkbox隐藏起来 */
}
#modeCheckBox:checked+.content {
/* 通过 checkbox 的伪类选择器checked,点击checkbox就会触发这个伪类 */
background-color: black;
color: white;
transition: all 1s;
}
#modeBtn {
font-size: 2rem;
float: right;
}
#modeBtn::after {
content: '';
}
#modeCheckBox:checked+.content #modeBtn::after {
content: '';
}
</style>
边栏推荐
- Five super handy phone open-source automation tools, which is suitable for you?
- dataset数据集有哪些_数据集类型
- 【一起学Rust 基础篇】Rust基础——变量和数据类型
- R语言ggplot2可视化:使用ggpubr包的ggsummarystats函数可视化箱图(通过ggfunc参数设置)、在可视化图像的下方添加描述性统计结果表格
- 第四课 标识符、关键字、变量、变量的分类和作用域、常量
- 面试官:SOA 和微服务的区别?这回终于搞清楚了!
- 微信小程序获取用户手机号码
- 特征工程学习笔记
- net start mysql 启动报错:发生系统错误5。拒绝访问。
- pandas连接oracle数据库并拉取表中数据到dataframe中、生成当前时间的时间戳数据、格式化为指定的格式(“%Y-%m-%d-%H-%M-%S“)并添加到csv文件名称中
猜你喜欢
随机推荐
LyScript 实现对内存堆栈扫描
面试突击71:GET 和 POST 有什么区别?
JUC(三):锁核心类AQS ing
【一起学Rust 基础篇】Rust基础——变量和数据类型
基于英雄联盟的知识图谱问答系统
Take you understand the principle of CDN technology
What knowledge points do you need to master to learn software testing?
第四周学习 HybridSN,MobileNet V1,V2,V3,SENet
微信为什么使用 SQLite 保存聊天记录?
【云原生 · Kubernetes】部署Kubernetes集群
从零开始Blazor Server(6)--基于策略的权限验证
【MySQL功法】第4话 · 和kiko一起探索MySQL中的运算符
距LiveVideoStackCon 2022 上海站开幕还有3天!
什么是bin文件?「建议收藏」
一次内存泄露排查小结
面试官:SOA 和微服务的区别?这回终于搞清楚了!
RTP协议分析
87.(cesium之家)cesium热力图(贴地形)
基于SSM和Web实现的农作物生长监控系统
肝完Alibaba这份面试通关宝典,我成功拿下今年第15个Offer