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

最新推荐文章于 2024-03-18 23:13:08 发布

itsxyu

最新推荐文章于 2024-03-18 23:13:08 发布

阅读量470

点赞数

本文链接：https://blog.csdn.net/itsxyu/article/details/90302017

版权

一.单选按钮

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>

itsxyu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义单选按钮和复选框按钮

一.单选按钮1.效果图2.代码<style> /*去除代码默认样式*/ input{ display: none; } /*在label前面添加自定义单选按钮*/ label:before{ content: ""; width: 5px; height: 5px; display: inline-block; border: 1px sol...
复制链接

扫一扫