checkbox 选择框的美化

最新推荐文章于 2022-03-20 22:29:44 发布

镇长1998

最新推荐文章于 2022-03-20 22:29:44 发布

阅读量1.2k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_41514525/article/details/90222384

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>美化checkbox</title>	
		<style type="text/css">
			
			*{
				margin: 0px;
				padding: 0px;
			}
			
			div input{
				display: none;
			}
			
			.chc label{
				background-image:  url('./checkbox.png');  
				background-position: left center;
				background-repeat: no-repeat;
				background-size:20px 20px;        /*把背景图片进行裁剪*/
				padding-left: 20px;	
			}
			
			
			.chc #check:checked + label{
				background-image:  url('./checkbox 1.png');  
				background-position: left center;
				background-repeat: no-repeat;
				background-size:20px 20px;
				padding-left: 20px;	
			} 
		</style>
	</head>
	
	<body>
		
	<div class='chc'>
		<input type="checkbox" id="check"  />
		<label for="check">选中我</label>
	</div>	
	
	</body>
</html>

图标选自阿里矢量图标库，下载的时候下载同一图标的两种不同颜色。

原有的checkbox框太难看，所以要先隐藏起来

选择器中用到了 +  的作用是同时选中伪类元素的兄弟元素

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

镇长1998

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
checkbox 选择框的美化

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>美化checkbox</title> <style type="text/css"> *{ margin: 0px; padding: 0px; ...
复制链接

扫一扫