一、我们先写好HTML的代码
我这里是写的一个登录界面
<label for="1"><input type="checkbox" id="1" class="ma"><span class="one"></span>记住密码</label><label for="2"><input type="checkbox" id="2" class="ma"><span class="two"></span>自动登录</label>
我们用span标签用来覆盖原有的checkbox
这是效果图
二、css代码添加
我们将原有的框改为透明
.ma {margin: 30px 0 30px 50px;width: 20px;height: 20px;cursor: pointer;opacity: 0;}
再修改span样式让他变成一个你想要的宽和高
代码如图
.ma[type=checkbox]+span{display: inline-block;border-radius: 2px;width: 20px;height: 20px;border: .02rem solid #0D1529;background-color: transparent;position: absolute;cursor: pointer;}
完成之后效果大概是这样
透明的效果已经出来了
最后也是最重要的是点击之后的效果
我们可以用伪元素的方法
.ma[type=checkbox]:checked+span::after{content:'\2714' ;color: blue;position: absolute;font-size: 20px;left: 2px;bottom: -2px;}
content里面可以放任意的特殊字符并且修改大小和颜色
最后我们就成功了
