自定义单选按钮和复选框按钮

最新推荐文章于 2025-07-12 15:07:25 发布

原创最新推荐文章于 2025-07-12 15:07:25 发布 · 508 阅读

1 ·

CC 4.0 BY-SA版权

博客主要介绍了单选按钮和复选按钮。分别给出了两种按钮的效果图，并展示了对应的代码，为前端开发中按钮的实现提供了参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.单选按钮

1.效果图

在这里插入图片描述

2.代码

<style>
	/*去除代码默认样式*/
	input{
		display: none;
	}
		/*在label前面添加自定义单选按钮*/
	label:before{
		content: "";
		width: 5px;
		height: 5px;
		display: inline-block;
		border: 1px solid red;
		border-radius: 50%;
		padding: 2px;
	}
		/*当input被选中时，对应label前面加样式*/
	input:checked+label:before{
		background: black;
		background-clip:content-box; /*图片裁切*/
	}
	</style>
</head>
<body>
	<!--input要与label绑定-->
	<input  id="man" type="radio" name="gender" checked="checked">
	<label for="man">男</label>
	
	<input id="woman" type="radio" name="gender">
	<label for="woman">女</label>
</body>

二.复选按钮

1. 效果图

在这里插入图片描述

2.代码

<style>
	input{
		display: none;
	}
	/*用label画出复选框的框*/
	label{
		display: inline-block;
		width: 10px;
		height: 10px;
		border:1px solid #ccc;
		position: relative;
	}
	/*选中时label变色*/
	input:checked+label{
		border-color: #888;
	}
	/*当复选框被选中时，相应label前添加勾的短边*/
	input:checked+label:before{
		content: "";
		width: 2px;
		height: 8px;
		display: inline-block;
		background: black;
		transform:rotate(-30deg);/*选中的勾的短边*/
		position: absolute;
		top:4px;
		left: 0px;
	}
	/*当复选框被选中时，相应label后添加勾的长边*/
	input:checked+label:after{
		content: "";
		width: 2px;
		height: 10px;
		display: inline-block;
		background: black;
		transform:rotate(30deg);	/*勾的长边*/
		position: absolute;
		top:0px;
		left: 5px;
	}
	</style>
</head>
<body>
	<input id="chinese" type="checkbox" name="cbox">
	<label for="chinese"></label>语文

	<input  id="match" type="checkbox" name="cbox">
	<label for="match"></label>数学

	<input  id="English" type="checkbox" name="cbox">
	<label for="English"></label>英语
</body>