相信大家在看到很多炫酷的网页时总会看到样式很棒的复选框,于是 脑补下代码“input[‘type=”checkbox”’]:padding:10px;border:1px solid red; background:black;…”,完后,一检查人家的代码,立刻懵逼。
废话不多说,我来了,拯救你的无知。
原理: 利用 label 这一特性 自动聚焦到复选框
css样式
<style>
input{
margin-bottom: 20px;
padding: 10px;
background-color: transparent;
border: none;
font-size: 15px;
border-bottom: 1px solid rgba(238, 238, 238, 0.41);
outline: none; /* 清除 点击input 的边框*/
color: #FFF;
}
input[type="checkbox" ] { display: none;}
label{
position: relative;
padding-left: 30px;
border: #F0F8FF;
display: inline-block;
font-size: 13px;
/*background: red;*/
color: #fff;
}
input[type="checkbox"] + label span{
width: 17px;
height: 17px;
display: inline-block;
border: 1px solid #fff;
position: absolute;
top: -3px;
left: 0;
}
input[type="checkbox"]:checked + label span::before{
content: "";
background: url(img/tick.png) no-repeat;
position: absolute;
left: 3px;
top: 3px;
font-size: 10px;
width: 10px;
height: 10px;
}
</style>
html 样式
<body>
<div class="container">
<form action="">
<input type="" name="" id="" placeholder="用户名" /><br><br>
<p>
<input type="checkbox" id="res"/>
<label for="res"><span></span>记住我</label>
</p>
</form>
</div>
</body>
效果图如下: