首页 技术文章 css

纯css仿手机滑动开关按钮

发布日期: 2024-04-06
FontSize: 【小 中 大】
纯css仿手机滑动开关按钮

原生复选框样式不是那么美观，所以对前端UI要求稍高一些的，都会对复选框按钮进行修饰，有使用css+js来控制的，也有使用css来直接修饰的。

主要样式：

伪元素::before，伪元素 ::before 是一种css选择器，用于在选定元素的内容之前插入生成的内容。这通常用于向元素添加装饰性内容，如图标、引号或其他装饰元素。伪元素包括 ::before 和 ::after，伪元素不是实际的html元素，它需要依附在html元素中。

下面的代码是仅使用css来修饰的开关按钮（复选框）。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开关按钮</title>
<style>
label { margin:0 0;}
.switch { /* 定义position为relative，子元素的absolute在这里作参照 */
	position: relative;
	display: inline-block;
	width: 48px;
	height: 28px;
}
.switch input { /* 隐藏input的显示 */
	display: none;
}
.slider {
	position: absolute;
	cursor: pointer; /* 撑满外层的div标签 */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc; /* 设置显示时候的动画 */
	-webkit-transition: .4s;
	transition: .4s;
}
/* 设置子div前面的元素 */

.slider:before {
	position: absolute; /* before的内容为空白 */
	content: "";
	height: 24px;
	width: 24px;
	left: 2px;
	bottom: 2px;
	background-color: white; /* 设置按钮点击的时候的动画效果 */
	-webkit-transition: .4s;
	transition: .4s;
}
/* 两个属性同时存在的时候的css样式 */

input:checked+.slider {
	background-color: #33CC66;
}
input:focus+.slider {
	box-shadow: 0 0 1px #33CC66;
}
/* 设置before元素的平移动画 */
input:checked+.slider:before {
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}
/* 设置下面一组按钮的圆角 */
.slider.round {
	border-radius: 28px;
}
.slider.round:before {
	border-radius: 50%;
}
</style>
</head>

<body>
<fieldset>
	<label><input type="checkbox">开关</label>
	<label><input type="checkbox" checked >开关</label>
</fieldset>
<fieldset>
	<div>未选中</div>
	<label class="switch">
	<input type="checkbox">
	<div class="slider round"></div>
	</label>

	<div>已选中</div>
	<label class="switch">
	<input type="checkbox" checked >
	<div class="slider round"></div>
	</label>
	
	<div>禁止打开</div>
	<label class="switch" id="disabled">
	<input type="checkbox" checked >
	<div class="slider round"></div>
	</label>
</fieldset>
<script src="https://z.lichil.com/views/index/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#disabled").click(function(){
		$(this).find("input").prop("checked",false);
		return false;
	});
});
</script>
</body>
</html>

在实际的应用中，为了更好的控制按钮的功能，可以还是要配合jquery来使用，例如上面的代码，最后一个按钮，一旦关闭，就无法再打开。

css jquery button