css⾃定义checkbox样式场景
项⽬中使⽤checkbox选择⽤户协议，但是原checkbox样式不怎么好看，这⾥⾃⼰单独设置⼀个
代码
<div class="auth_agreen">
<input id="select_all" name="select_all" type="checkbox" checked>
<label for="select_all"> <i></i>我已阅读<a href="./agreement.html">《⽤户协议》</a>|
<ahref="./conceal.html">《隐私协议》</a></label>
</div>
input[type="checkbox"] {
vertical怎么读display: none;
}
input[type="checkbox"]+label>i {
display: inline-block;
width: .9375rem;
height: .9375rem;
border: .0625rem solid #000;
background: #fff;
margin-right: .625rem;
vertical-align: middle;
}
input[type="checkbox"]:checked+label>i {
position: relative;
border: .0625rem solid #3582E9;
background: #3582E9;
top: -0.0625rem;
}
input[type="checkbox"]:checked+label>i::before {
content: '';
position: absolute;
width: .25rem;
height: .5rem;
color: black;
border-bottom: .125rem solid #fff;
border-right: .125rem solid #fff;
left: 50%;
top: 22%;
transform-origin: center;
transform: translate(-50%, -30%) rotate(40deg);
-webkit-transform: translate(-50%, -30%) rotate(40deg);
}
效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。