html,css页面中的几种勾选的效果制作

页面中的勾选框还是比较常见的啊，一般都是请勾选 同意什么协议什么 七天登录什么的
但是我们要自己制作一个呢 先看下下面的几种效果

上面用了四个方法 做出来的勾选情况 接下来进行一一讲解
1.最常见的 使我们 form表单中 checkbox 也是最简单

直接一个 input type="checkbox" 就出来了
<input type="checkbox" name="" id="">

但是吧 我们就单单做一个勾选的动作 用这个pc端还可以 但是 移动端就有点问题了
毕竟各个厂家可能对这个默认样式设计的也不太一样
一般是不建议的哈 而且这个表单元素 最好还是在表单form里面使用

2.通过图片的形式进行 制作 图片不存在什么兼容性的问题 通过控制元素背景图片的切换 来达到那种勾选效果 其实很多种情况 兼容性不好做的话 都可以采用图片来解决问题

.check3{
	width: 40px;
       height: 40px;
       position: relative;
       margin: 50px 0;
       border-radius: 5px;
       cursor: pointer;
       transition: background-color 0.25s;
       background: url('./uncheck.png') no-repeat;
       background-size: 100% 100%;
}
.check3_active{
	background: url('./check.png') no-repeat;
       background-size: 100% 100%;
}
<div class="check3"></div>

3.和4 有限类似 都是通过伪类生成器来制作的 但是 有一点区别

3中的对勾 是通过css画出来的
简单说一些 就是在外层div中 通过伪类生成器生成一个块级元素 ，然后使他们的 宽高不同然是旋转一下 好像是一个对勾的情况 然后 这样就可以了
border: 3px solid #fff;
border-width: 0 0 3px 3px;

<div class="check1"></div>

.check1{
	        width: 40px;
	        height: 40px;
	        position: relative;
	        margin: 50px 0;
	        border: 1px solid #ddd;
	        border-radius: 5px;
	        cursor: pointer;
	        transition: background-color 0.25s;
	    }
	    .check1_active{
	        background: palevioletred;
	        border-color: palevioletred;
	    }
    	.check1_active:after{
	        content: '';
	        display: block;
	        width: 14px;
	        height: 10px;
	        border: 3px solid #fff;
	        border-width: 0 0 3px 3px;
	        position: absolute;
	        top: 50%;
	        left: 50%;
	        margin-top: -8px;
	        margin-left: -8px;
	        transform: rotate(-45deg);
	    }

4.虽然也是伪类生成器 但是采用的是 uincode 字符编码 制作的 相对来说 我还是比较喜欢最后一种 哈哈
"\2610” 编码 表示 没有对勾情况下的
"\2611” 表示有对勾的情况下

.check2:before{
	content: "\2610";  
	color: #666;
	position: absolute;
	display: block;
	top: 35px;
	left:10px;
	font-size: 50px;
}
.check2_active:before{
	content: "\2611";
	color: #f00;
	position: absolute;
	display: block;
	top: 35px;
	left:10px;
	font-size: 50px;
}
<div class="check2"></div>

上述总结的话 ，其实吧 除了 checkbox外 其他的都是相当于 是一个有一个类名在 有和无之间的切换
然后 我们通过js动态控制一下 就实现了 勾选的动态效果了

<script>
		$('.check1').click(function(){
			$(this).toggleClass('check1_active');
		})
		$('.check2').click(function(){
			$(this).toggleClass('check2_active');
		})
		$('.check3').click(function(){
			$(this).toggleClass('check3_active');
		})
	</script>

最后我们再复现一次效果 加上过度而效果 看起来 效果会更好点 不是吗