HTML CSS实现自定义开关样式 checkbox

已于 2024-02-02 14:31:57 修改
阅读量873 收藏 4
点赞数
分类专栏： HTML CSS 文章标签： css html 前端
于 2022-07-08 15:10:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PanDa____/article/details/125678165
版权
CSS 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
HTML
3 篇文章 0 订阅
订阅专栏

知识点

CSS  content属性  attr()

attr(attribute)将元素的 attribute 属性以字符串形式返回。

HTML

<input class="bs_switch"  type="checkbox" data-on="开启" data-off="关闭" checked="">

 CSS

.bs_switch {
      width: 46px;
	  height: 22px;
	  box-sizing: border-box;
	  position: relative;
	  background: #cccccc;
	  border: 1px solid #dfdfdf;
	  border-radius: 16px;
	  line-height: 20.5px;
	  text-align: center;
	  cursor: pointer;
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  outline: 0;
	}

	.bs_switch:active,
	.bs_switch:visited {
	  outline: none;
	}

	.bs_switch:before {
	  content: attr(data-off);
	  position: absolute;
	  top: 0;
	  left: 1px;
	  padding-left: 13px;
	  border-radius: 15px;
	  background-color: #cccccc;
	  color: #fff;
	  font-size: 12px;
	}

	.bs_switch:after {
	  content: " ";
	  position: absolute;
	  top: 4px;
	  left: 2px;
	  width: 12px;
	  height: 12px;
	  border-radius: 15px;
	  background-color: #ffffff;
	  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	  transition: transform 0.3s;
	}

	.bs_switch:checked {
	  border-color: #0c66ff;
	  background-color: #0c66ff;
	}

	.bs_switch:checked:after {
	  transform: translateX(28px);
	}

	.bs_switch:checked:before {
	  content: attr(data-on);
	  padding-left: 0px;
	  padding-left: 2px;
	  background-color: #0c66ff;
	  color: #fff;
	  width: 24px;
	}

CSS3开关样式   

 

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纯CSS3开关样式的自定义单选框DEMO演示</title>

		<style>
			body {
				background: #000;
				margin: 0;
				padding: 0;
			}


			.wrapper {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				width: 400px;
				margin: 40vh auto 0;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}

			.switch_box {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				max-width: 200px;
				min-width: 200px;
				height: 200px;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				-webkit-box-flex: 1;
				-ms-flex: 1;
				flex: 1;
			}

			/* Switch 1 Specific Styles Start */

			.box_1 {
				background: #eee;
			}

			input[type="checkbox"].switch_1 {
				font-size: 30px;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				width: 3.5em;
				height: 1.5em;
				background: #ddd;
				border-radius: 3em;
				position: relative;
				cursor: pointer;
				outline: none;
				-webkit-transition: all .2s ease-in-out;
				transition: all .2s ease-in-out;
			}

			input[type="checkbox"].switch_1:checked {
				background: #0ebeff;
			}

			input[type="checkbox"].switch_1:after {
				position: absolute;
				content: "";
				width: 1.5em;
				height: 1.5em;
				border-radius: 50%;
				background: #fff;
				-webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
				box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
				-webkit-transform: scale(.7);
				transform: scale(.7);
				left: 0;
				-webkit-transition: all .2s ease-in-out;
				transition: all .2s ease-in-out;
			}

			input[type="checkbox"].switch_1:checked:after {
				left: calc(100% - 1.5em);
			}

			/* Switch 1 Specific Style End */


			/* Switch 2 Specific Style Start */

			.box_2 {
				background: #666;
			}

			input[type="checkbox"].switch_2 {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				width: 100px;
				height: 8px;
				background: #444;
				border-radius: 5px;
				position: relative;
				outline: 0;
				cursor: pointer;
			}

			input[type="checkbox"].switch_2:before,
			input[type="checkbox"].switch_2:after {
				position: absolute;
				content: "";
				-webkit-transition: all .25s;
				transition: all .25s;
			}

			input[type="checkbox"].switch_2:before {
				width: 40px;
				height: 40px;
				background: #ccc;
				border: 5px solid #666;
				border-radius: 50%;
				top: 50%;
				left: 0;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}

			input[type="checkbox"].switch_2:after {
				width: 30px;
				height: 30px;
				background: #666;
				border-radius: 50%;
				top: 50%;
				left: 10px;
				-webkit-transform: scale(1) translateY(-50%);
				transform: scale(1) translateY(-50%);
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
			}

			input[type="checkbox"].switch_2:checked:before {
				left: calc(100% - 35px);
			}

			input[type="checkbox"].switch_2:checked:after {
				left: 75px;
				-webkit-transform: scale(0);
				transform: scale(0);
			}

			/* Switch 2 Specific Style End */


			/* Switch 3 Specific Style Start */

			.box_3 {
				background: #19232b;
			}

			.toggle_switch {
				width: 100px;
				height: 45px;
				position: relative;
			}

			input[type="checkbox"].switch_3 {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
				cursor: pointer;
				outline: 0;
				z-index: 1;
			}

			svg.checkbox .outer-ring {
				stroke-dasharray: 375;
				stroke-dashoffset: 375;
				-webkit-animation: resetRing .35s ease-in-out forwards;
				animation: resetRing .35s ease-in-out forwards;
			}

			input[type="checkbox"].switch_3:checked+svg.checkbox .outer-ring {
				-webkit-animation: animateRing .35s ease-in-out forwards;
				animation: animateRing .35s ease-in-out forwards;
			}

			input[type="checkbox"].switch_3:checked+svg.checkbox .is_checked {
				opacity: 1;
				-webkit-transform: translateX(0) rotate(0deg);
				transform: translateX(0) rotate(0deg);
			}

			input[type="checkbox"].switch_3:checked+svg.checkbox .is_unchecked {
				opacity: 0;
				-webkit-transform: translateX(-200%) rotate(180deg);
				transform: translateX(-200%) rotate(180deg);
			}


			svg.checkbox {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			svg.checkbox .is_checked {
				opacity: 0;
				fill: yellow;
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
				-webkit-transform: translateX(200%) rotate(45deg);
				transform: translateX(200%) rotate(45deg);
				-webkit-transition: all .35s;
				transition: all .35s;
			}

			svg.checkbox .is_unchecked {
				opacity: 1;
				fill: #fff;
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
				-webkit-transform: translateX(0) rotate(0deg);
				transform: translateX(0) rotate(0deg);
				-webkit-transition: all .35s;
				transition: all .35s;
			}

			@-webkit-keyframes animateRing {
				to {
					stroke-dashoffset: 0;
					stroke: #b0aa28;
				}
			}

			@keyframes animateRing {
				to {
					stroke-dashoffset: 0;
					stroke: #b0aa28;
				}
			}

			@-webkit-keyframes resetRing {
				to {
					stroke-dashoffset: 0;
					stroke: #233043;
				}
			}

			@keyframes resetRing {
				to {
					stroke-dashoffset: 0;
					stroke: #233043;
				}
			}

			/* Switch 3 Specific Style End */


			/* Switch 4 Specific Style Start */

			.box_4 {
				background: #eee;
			}

			.input_wrapper {
				width: 80px;
				height: 40px;
				position: relative;
				cursor: pointer;
			}

			.input_wrapper input[type="checkbox"] {
				width: 80px;
				height: 40px;
				cursor: pointer;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				background: #315e7f;
				border-radius: 2px;
				position: relative;
				outline: 0;
				-webkit-transition: all .2s;
				transition: all .2s;
			}

			.input_wrapper input[type="checkbox"]:after {
				position: absolute;
				content: "";
				top: 3px;
				left: 3px;
				width: 34px;
				height: 34px;
				background: #dfeaec;
				z-index: 2;
				border-radius: 2px;
				-webkit-transition: all .35s;
				transition: all .35s;
			}

			.input_wrapper svg {
				position: absolute;
				top: 50%;
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
				fill: #fff;
				-webkit-transition: all .35s;
				transition: all .35s;
				z-index: 1;
			}

			.input_wrapper .is_checked {
				width: 18px;
				left: 18%;
				-webkit-transform: translateX(190%) translateY(-30%) scale(0);
				transform: translateX(190%) translateY(-30%) scale(0);
			}

			.input_wrapper .is_unchecked {
				width: 15px;
				right: 10%;
				-webkit-transform: translateX(0) translateY(-30%) scale(1);
				transform: translateX(0) translateY(-30%) scale(1);
			}

			/* Checked State */
			.input_wrapper input[type="checkbox"]:checked {
				background: #23da87;
			}

			.input_wrapper input[type="checkbox"]:checked:after {
				left: calc(100% - 37px);
			}

			.input_wrapper input[type="checkbox"]:checked+.is_checked {
				-webkit-transform: translateX(0) translateY(-30%) scale(1);
				transform: translateX(0) translateY(-30%) scale(1);
			}

			.input_wrapper input[type="checkbox"]:checked~.is_unchecked {
				-webkit-transform: translateX(-190%) translateY(-30%) scale(0);
				transform: translateX(-190%) translateY(-30%) scale(0);
			}

			/* Switch 4 Specific Style End */
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="switch_box box_1">
				<input type="checkbox" class="switch_1">
			</div>
			<div class="switch_box box_2">
				<input type="checkbox" class="switch_2">
			</div>
			<div class="switch_box box_3">
				<div class="toggle_switch">
					<input type="checkbox" class="switch_3">
					<svg class="checkbox" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate"
						viewBox="0 0 168 80">
						<path class="outer-ring"
							d="M41.534 9h88.932c17.51 0 31.724 13.658 31.724 30.482 0 16.823-14.215 30.48-31.724 30.48H41.534c-17.51 0-31.724-13.657-31.724-30.48C9.81 22.658 24.025 9 41.534 9z"
							fill="none" stroke="#233043" stroke-width="3" stroke-linecap="square"
							stroke-miterlimit="3" />
						<path class="is_checked"
							d="M17 39.482c0-12.694 10.306-23 23-23s23 10.306 23 23-10.306 23-23 23-23-10.306-23-23z" />
						<path class="is_unchecked"
							d="M132.77 22.348c7.705 10.695 5.286 25.617-5.417 33.327-2.567 1.85-5.38 3.116-8.288 3.812 7.977 5.03 18.54 5.024 26.668-.83 10.695-7.706 13.122-22.634 5.418-33.33-5.855-8.127-15.88-11.474-25.04-9.23 2.538 1.582 4.806 3.676 6.66 6.25z" />
					</svg>
				</div>
			</div>
			<div class="switch_box box_4">
				<div class="input_wrapper">
					<input type="checkbox" class="switch_4">
					<svg class="is_checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.67 426.67">
						<path
							d="M153.504 366.84c-8.657 0-17.323-3.303-23.927-9.912L9.914 237.265c-13.218-13.218-13.218-34.645 0-47.863 13.218-13.218 34.645-13.218 47.863 0l95.727 95.727 215.39-215.387c13.218-13.214 34.65-13.218 47.86 0 13.22 13.218 13.22 34.65 0 47.863L177.435 356.928c-6.61 6.605-15.27 9.91-23.932 9.91z" />
					</svg>
					<svg class="is_unchecked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212.982 212.982">
						<path
							d="M131.804 106.49l75.936-75.935c6.99-6.99 6.99-18.323 0-25.312-6.99-6.99-18.322-6.99-25.312 0L106.49 81.18 30.555 5.242c-6.99-6.99-18.322-6.99-25.312 0-6.99 6.99-6.99 18.323 0 25.312L81.18 106.49 5.24 182.427c-6.99 6.99-6.99 18.323 0 25.312 6.99 6.99 18.322 6.99 25.312 0L106.49 131.8l75.938 75.937c6.99 6.99 18.322 6.99 25.312 0 6.99-6.99 6.99-18.323 0-25.313l-75.936-75.936z"
							fill-rule="evenodd" clip-rule="evenodd" />
					</svg>
				</div>
			</div>
		</div>

	</body>
</html>

PanDa____
关注
专栏目录
HTML的checkbox和radio样式美化的简单实例
12-14
HTML的checkbox和radio样式美化的简单实例 checkbox： XML/HTML Code复制内容到剪贴板 <style type="text/css">       input[type="checkbox"]        {            display: none;        }               input[type="checkbox"] + label            {                display: inline-block;       
HTML 开关按钮
weixin_52707625的博客
06-16 6548
HTML制作开关按钮
html实现switch开关
最新发布
wsdbz的博客
10-17 1935
【代码】html实现switch开关。
制作css开关,6款CSS3制作的开关切换按钮
weixin_35389904的博客
08-03 704
CSS语言：CSSSCSS确定.row {width: 100%;display: block;line-height: 60px;text-align: center;}input[type="checkbox"] {display: none;}input[type="checkbox"] + label {display: inline-block;width: 40px;height: 2...
html 多选框的样式,漂亮的checkbox样式(多选框)完美兼容IE8/9/10，FF等
weixin_42653691的博客
06-03 1130
说起来汗颜，如此常用的checkbox我改变样式，居然需要百度，而且百度很久，更可气的是百度很久找不到可行的解决方案。后来在csscheckbox.com上找到很多样式，结果一测兼容性IE不行。如此一来，耽误了很久的时间。抄了近道屡试不行，回归JQuery UI，不用说兼容性挺好，而且样式自己随心画。在此记录一款checkbox的样式，供大家也供我以后方便使用。有三种状态，default、hov...
CSS开关按钮
qq_35728999的博客
05-14 2525
使用CSS制作开关，最近制作后台页面时，发现普通的多选框过于单调，而使用开关按钮要引入Element-UI之类的东西，如果单独要使用这一个按钮，引入库代价比较大，没有必要为了这一个效果引入库，所以想使用HTML+CSS修改默认的多选框按钮。
CSS3自定义Checkbox开关按钮美化特效
01-01
本文将深入探讨如何使用CSS3来实现"自定义Checkbox开关按钮美化特效"，主要关注扁平风格和3D视觉效果的设计。 首先，Checkbox是HTML中的一个表单元素，用于用户对特定选项进行选择或取消。默认情况下，Checkbox的...
纯CSS3灯光开关动画 自定义checkbox样式
08-23
值得注意的是，这款开关是通过CSS3自定义checkbox样式来实现的，记得很早以前也分享过类似的一个CSS3应用纯CSS3实现发光开关切换按钮，也是通过CSS3改变checkbox默认行为样式来实现的，外观都比较漂亮。
超清新的3款纯CSS3自定义Checkbox开关
08-23
前两天我们刚分享过一款纯CSS3灯光开关动画 自定义checkbox样式，主要是利用CSS3样式渲染checkbox控件和label标签实现自定义开关样式。今天我们要分享的也是一款基于CSS3的自定义Checkbox开关，一共有3种漂亮的外观...
CSS开关按钮样式详解
12-10
为了实现更多的开关样式，可以创建不同的CSS类，比如`.cmn-toggle-round-flat`可以创建扁平化风格的开关，或者`.cmn-toggle-yes-no`可以在`<label>`中添加文字，分别代表“开”和“关”。 通过这种方式，我们可以...
css自定义checkbox
11-24
当我们谈论“css自定义checkbox”时，我们指的是利用CSS来改变HTML中的复选框（checkbox）元素的默认外观和行为，使其更符合设计需求或者增强用户体验。复选框是用户界面中常见的一种元素，用于让用户在多个选项中...
html更改checkbox样式,html自定义checkbox样式
weixin_34366539的博客
07-15 2609
1.原理就是将浏览器原生checkbox隐藏，对label进行相关操作。因为label和checkbox时绑在一起的，所以点击label就会选中2.实现效果图片.png3.代码提供一种图片.png1.html代码原生的checkbox和对应的label，注意lable的for要与checkbox的id对应markcheckbox12.css代码1)将原生的checkbox隐藏input[type=...
操作元素之修改样式属性
leechoy
06-12 659
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
CSS实现开关按钮样式
spring_007_999的博客
04-23 921
css开关样式
html实现iphone同款开关
weixin_43155301的博客
08-11 1084
html开关、iphone的开关
javascript+html灯泡开关 2种方式
amz_java的博客
03-21 1575
灯泡开关
HTML/CSS 自定义开关按钮控件(switch)样式
热门推荐
清风的博客
07-15 7万+
今天这篇文章给大家带来的是在移动端很常见的开关控件。样式主要是通过CSS来定制完成，上一篇博客讲的是自定义滑动条的样式，同样是自定义样式，上一篇是直接通过CSS对 input[type="range"] 进行样式改造，而今天这一篇实现思路是上一次提到过的另一种方案，将input控件隐藏，通过其他标签来完成样式的定制。这样做的好处就在于更加的灵活，这是我们今天所要达到的效果。下面就让我们一起来看看怎
18、HTML复选框checkbox
you can you up up up的博客
10-30 2万+
正常情况下，单选按钮只能实现选中一个的效果。例如爱好字段，这时用户想选择多个，就不能再使用单选按钮了，可以使用 HTML 中的复选框。复选框与单选按钮不同，用户通过点击就可以实现选中或取消，而且不限制选中的数量。 在 HTML 中，把 <input> 标签中的 type 属性设置为 checkbox 可以实现多选框的效果。具体语法格式如下： <input type="checkbox" /> 1. 复选框的常用属性 复选框的常用属性： checked ----用来规定在页面加载时
前端必学的CSS制作Switch动画开关按钮演示
风中追风
02-16 5678
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的CSS制作Switch动画开关按钮，赶紧学起来吧，加在自己开发网页的按钮选择处，给页面增加一点活泼的气息~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值