今天分享的是多选框和单选框的美化教程….
效果预览
<div>
美化前:
<input type="radio">
<input type="radio">
<input type="checkbox">
<input type="checkbox">
</div>
<div>
美化后:
<label class="beautify-check">
<input type="radio">
<i></i>
</label>
<label class="beautify-check">
<input type="radio">
<i></i>
</label>
<label class="beautify-check">
<input type="checkbox">
<i></i>
</label>
<label class="beautify-check">
<input type="checkbox">
<i></i>
</label>
</div>
.beautify-check {
padding-left: 20px !important;
cursor: pointer;
}
.beautify-check input {
position: absolute;
margin-left: -20px;
opacity: 0;
}
.beautify-check>i {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
margin-top: -2px;
margin-right: 4px;
margin-left: -16px;
line-height: 1;
vertical-align: middle;
background-color: #fff;
border: 1px solid #cfdadd;
}
.beautify-check input:checked+i {
border-color: #09c !important;
}
.beautify-check input:checked+i:before {
top: 4px;
left: 4px;
width: 8px;
height: 8px;
background-color: #09c !important;
}
.beautify-check input[type="radio"]+i,
.beautify-check input[type="radio"]+i:before {
border-radius: 50%;
}
.beautify-check>i:before {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: transparent;
content: "";
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
声明:您好,我站所有资源(包括但不局限于:源码、工具、素材、字体、模板等)均为个人投稿及网络收集而来,并未取得原始权利人授权,故禁止一切商用行为,仅可用于个人研究,学习使用。请务必在下载后24小时内删除,一切因下载人使用所引起的法律相关责任,包括但不局限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读、理解、同意以上内容,如对以上内容持有异议,请勿下载,谢谢配合!支持正版,人人有责,如不慎对您的合法权益构成侵犯,请联系我们对相应内容予以删除。