利用 input type="checkbox" 加纯 css 制作漂亮的复选框

最新推荐文章于 2024-05-07 09:22:09 发布
最新推荐文章于 2024-05-07 09:22:09 发布
阅读量3k 收藏
点赞数 2
分类专栏： 实际应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013970232/article/details/87361507
版权

效果预览

ps:懒得看的看官,可以直接去文末拷代码

 

首先了解一次 css选择器的[+]选择器,w3school的介绍选节如下:

选择器例子例子描述
element+elementdiv+p选择紧接在 <div> 元素之后的所有 <p> 元素
:checkedinput:checked选择每个被选中的 <input> 元素

[+]选择器可以选择到紧跟某元素<div />之后的兄弟节点, 而非<div />里的后代元素

 

[:checked]选择器, 可以说是针对<input />而存在的, 它匹配的是被选中的 input 元素

 

 

复选框html结构

<input id="switch" class="Dswitch" type="checkbox" />
<label for="switch"></label>

css主要样式

.Dswitch {
	opacity: 0;
	width: 0;
	height: 0;
	display: none;
}

.Dswitch+label {
	position: relative;
	display: inline-block;
	top: 0px;
	vertical-align: middle;
}

.Dswitch+label:after {
	content: '';
	outline: none;
	width: 52px;
	height: 31px;
	position: relative;
	border: 1px solid #dfdfdf;
	background-color: #fdfdfd;
	box-shadow: #dfdfdf 0 0 0 0 inset;
	border-radius: 20px;
	-moz-border-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-clip: content-box;
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	user-select: none;
	outline: none;
	z-index: 1;
}

.Dswitch+label:before {
	content: '';
	width: 29px;
	height: 29px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	z-index: 10;
}

.Dswitch:checked+label:after {
	border-color: #64bd63;
	box-shadow: #64bd63 0 0 0 16px inset;
	background-color: #64bd63;
}

.Dswitch:checked+label:before {
	left: 23px;
}

注:for 对应指定 id

 

原理分析

 

  1. 原生复选框有是否选择的功能, 利用原生复选框 <input type="checkbox" /> 支持这个功能
  2. <label /> 设置 for 值后,就算跟对应的 表单元素 不是包裹关系,也可以跟对应的 表单元素 绑定关联起来
  3. [:checked], [+] 两个选择器结合使用, 用[:checked]匹配被选中的表单, [:checked + label] 就能匹配到 选中表单后面的<label />元素了
  4. <label /> 元素利用 :before, :after 就可以设置对应的样式效果

 

 

动画优化

最后在.Dswitch-animbg{}里加合适的 transition 设置,就可以优化成动画效果

 

完整代码如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="renderer" content="webkit">
		<meta name="referrer" content="always">
		<title>漂亮的复选框</title>
		<style>
			.user-select-none {
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
			}
			
			.Dswitch {
				opacity: 0;
				width: 0;
				height: 0;
				display: none;
			}
			
			.Dswitch+label {
				position: relative;
				display: inline-block;
				top: 0px;
				vertical-align: middle;
			}
			
			.Dswitch+label:after {
				content: '';
				outline: none;
				width: 52px;
				height: 31px;
				position: relative;
				border: 1px solid #dfdfdf;
				background-color: #fdfdfd;
				box-shadow: #dfdfdf 0 0 0 0 inset;
				border-radius: 20px;
				-moz-border-radius: 20px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				background-clip: content-box;
				display: inline-block;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				user-select: none;
				outline: none;
				z-index: 1;
			}
			
			.Dswitch+label:before {
				content: '';
				width: 29px;
				height: 29px;
				position: absolute;
				top: 2px;
				left: 2px;
				border-radius: 20px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				background-color: #fff;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
				z-index: 10;
			}
			
			.Dswitch:checked+label:after {
				border-color: #64bd63;
				box-shadow: #64bd63 0 0 0 16px inset;
				background-color: #64bd63;
			}
			
			.Dswitch:checked+label:before {
				left: 23px;
			}
			
			.Dswitch-animbg+label:after {
				transition: background-color ease 0.4s;
			}
			
			.Dswitch-animbg+label:before {
				transition: left 0.3s;
			}
			
			.Dswitch-animbg:checked+label:after {
				box-shadow: #dfdfdf 0 0 0 0 inset;
				background-color: #64bd63;
				transition: border-color 0.4s, background-color ease 0.4s;
			}
			
			.Dswitch-animbg:checked+label:before {
				transition: left 0.3s;
			}
		</style>
	</head>

	<body>

		<label class="user-select-none">
			<span style="font-size: 16px;vertical-align: sub;">是否启用</span>
			<input id="switchAnimbg" class="Dswitch Dswitch-animbg" type="checkbox" />
			<label for="switchAnimbg"></label>
			<span style="font-size: 16px;vertical-align: sub;">动画版</span>
		</label>
		<br />
		<label class="user-select-none">
			<span style="font-size: 16px;vertical-align: sub;">是否启用</span>
			<input id="switch" class="Dswitch" type="checkbox" />
			<label for="switch"></label>
			<span style="font-size: 16px;vertical-align: sub;">非动画版</span>
		</label>

	</body>

</html>

 

 

 

352328759
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 漂亮单选按钮样式,10个HTML5美化版复选框和单选框
weixin_36211428的博客
06-19 4250
单选框html一、CSS3漂亮的自定义Checkbox复选框 9款迷人样式以前咱们分享过一款很是不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮，外观很是时尚。今天咱们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。html5 二、CSS3自定义发光以前咱们分享过一些CSS3和HTML5实...
css美化checkbox样式,置灰样式，超简洁
chiwen_wen的博客
05-17 7712
css美化checkbox样式 效果图 样式可以自由定制，不用辛苦写一堆css html <div> <input type="checkbox" class="toggle"> <span>复选框1<span> </div> <div> <input type="checkbox" checked c...
input的Checkbox（复选框）属性具体怎么使用
ggq53219的博客
04-01 2397
Checkbox（复选框）的具体用法
复选框checkbox的三种状态
m0_74265396的博客
07-30 3776
一旦设置checked="false"或者checked = true或者不设置任何值，都会被解释为选中。不设置checked是默认不被选中的，
【前端随记01】纯css自定义checkbox复选框样式
最新发布
2401_84097774的博客
05-07 632
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
漂亮的html单选框,自学篇之-----纯css做的漂亮的单选框复选框样式
weixin_30072631的博客
06-09 712
checkbook[id^="checkbox-"] + label {background-color: #FFF;padding: 11px 9px;border-radius: 7px;display: inline-block;position: relative;margin-right: 30px;background: #F7836D;width: 88px;height: 13p...
mui.css和input type=checkbox冲突，导致打不上勾(无法选中)的解决办法.zip
11-15
这个压缩包文件"mui.css和input type=checkbox冲突，导致打不上勾(无法选中)的解决办法.zip"显然是针对一个具体的技术问题，即MUI CSS框架与HTML复选框(input[type="checkbox"])之间存在兼容性问题，导致复选框无法...
纯css3实现效果超级炫的checkbox复选框和radio单选框
01-19
今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框，效果超级炫。先让我们看看图吧! 源码下载这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧 html代码： 复制代码代码如下: ...
CSS3美化复选框checkbox
11-11
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够对复选框（checkbox）进行美化，从而提升用户界面的视觉吸引力和交互体验。复选框是HTML中一种基本的表单元素，通常用于让...
CSS定义Radio单选项和Checkbox复选框样式有效代码
12-08
自定义Radio单选项和Checkbox复选框样式的关键在于利用CSS的伪类（如`:checked`、`:hover`）和选择器（如`+`）以及可能的JavaScript交互来模拟原生控件的行为。这种方法允许开发者创建更加美观且符合品牌风格的界面...
一款纯css3实现简单的checkbox复选框和radio单选框
09-25
为了不让原始的复选框和单选框显示出来，我们可以设置`input[type="radio"], input[type="checkbox"] { display: none; }`，这样它们就不再可见，而只保留我们自定义的样式。 2. **选择器与伪类**： CSS3的选择器...
原生 复选框 input[type=“checkbox“] 样式修改
qq_56402474的博客
02-22 989
原生 复选框 input[type=“checkbox“] 样式修改
css修改input框默认样式（checkbox）
zhudingfengshen的博客
05-29 3521
项目场景： 可以看到这是checbox，底图为默认样式，但是是单选框的逻辑，开始打算用radio实现样式修改不过遇到了很多困难，还是选择了checkbox实现单选逻辑 解决方案： 替换内部对号为icon及修改内部填充色等 input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; background: #fff; /* 未选中时的背景颜色 */ width: 100
input[type=“checkbox“] 美化CheckBox
fastrack_15233866884的博客
03-22 206
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @keyframes cb_after { from { opacity: 0; height: 0; } to { opacity: 1; he...
css：默认的checkbox、input、radio太丑了？手把手教你改变使用纯css3改写的带动画的默认样式
热门推荐
sunshine940326的博客
05-10 1万+
项目的github地址为： https://github.com/sunshine940326/css3formeledemo 本文首发于我的个人博客，http://cherryblog.site/ ；欢迎大家查看我的其他博客 最近在做公司后台的优化项目，拿到设计稿一看，设计师觉得默认的input、checkbox、radio太丑了，要优化，在做了几个demo之后找到了要怎么优化这些样
html之checkbox------checkbox只是input框的type属性
认知 行动 坚持
02-26 1万+
我喜欢自行车： 我喜欢汽车： test function output() { if(document.getElementById("Bike").checked) { alert("1"); } if(document.getElementById("Car").checked) { alert("2"); } }         是否选中，
input type=“checkbox“
weixin_56361614的博客
09-24 114
实现被让选中的input标签影响其他元素 css <style> input:checked + label{ background: red; } </style> html <input type="checkbox" > <label >1232</label>
html <Label>标签包含checkbox可按文字就选中
note23的专栏
02-15 7741
&lt;label&gt; &lt;input type="checkbox"&gt; Remember me &lt;/label&gt;
使用CSS实现自定义input[checkbox]样式
weixin_30344131的博客
04-05 90
思路：使用label上的for熟悉，与checkbox上的id相对应来达到点击选中效果，在使用伪元素，或者其他元素，定位至checkbox上方，替代checkbox，并且隐藏checkbox，使用CSS3选择器：checked + 毗邻选择器，选中后给伪元素，或者其他元素添加选中样式； 兼容： ：after 兼容IE8+ : checked 兼容IE9+ ...
css 改变input type=“checkbox” 默认边框的颜色
05-27
要改变 input type="checkbox" 默认边框的颜色，可以使用 CSS 伪类选择器 :checked 和 ::before 或 ::after 伪元素来实现。以下是一个示例： ```css input[type="checkbox"] { display: none; /* 隐藏默认的复选框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值