伪类复选框改变样式
2020-03-02 本文已影响0人
坏丶毛病
大家在开发的过程中，肯定都用过复选框，那么大家有没有为了改变样式而烦恼过？
这里给大家介绍特别简单的一种方式。
话不多说，上代码。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
.uls span {
position: relative;
}
.uls .input_check {
position: absolute;
visibility: hidden;
}
.uls .input_check+label {
display: inline-block;
width: 35px;
height: 35px;
border: 1px solid #f61a63;
display: flex;
}
.uls .input_check:checked+label:after {
content: "√";
color:red;
font-size: 30px;
position: absolute;
left: 7px;
top: -1px;
}
</style>
<body style="height: 100%; margin: 0">
<ul class="uls">
<span>
<input type="checkbox" class="input_check" id="check4">
<label for="check4"></label>
</span>
</ul>
</body>
</html>
这里通过input的checkbox复选框，设置id，通过label的for来绑定这个复选框，然后是一个伪类实现效果。
效果图：
image
好了，这样就实现了一个简单的复选框效果，大家可以随意更改自己的样式。
如有问题，请指出，接受批评。
