HBuilder-简易按钮

最新推荐文章于 2023-06-12 09:14:49 发布

妮可珍郝坎

最新推荐文章于 2023-06-12 09:14:49 发布

阅读量1.1k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/nikezhenhaokan/article/details/129298378

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			[type="checkbox"]{
				display: none;
			}
			.switch{
			    width:30px;
			    height:122px;
			    background: green;
			display: inline-block;
			border-radius:0.5px;
			border: 3px solid #666;
			}
			.switch>span{
				display: block;
				width: 29px;
				height:29px;
				border-radius: 100px;
				background-color: yellow;
				margin-top: 90px;
				border-radius: 45px;
			}
			[type="checkbox"]:checked+label{
				background-color: black;
			}
			[type="checkbox"]:checked+label>span{
				margin-top: 5px;
				background-color: gray;
			}
		</style>
		
	</head>
	<body>
		<input type="checkbox" id="a">
		<label for="a" class="switch">
			<span class="ball"></label>
	</body>
</html>

效果如下：