纯css对radio和checkbox进行美化处理
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2019-05-21 09:52:15
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
最终效果
直接在页面中添加下面js就可以啦，不用其它多余的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
@-webkit-keyframes scale-spring{0%{opacity:.5;-webkit-transform:scale(0.5);transform:scale(0.5)}80%{opacity:.8;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes scale-spring{0%{opacity:.5;-moz-transform:scale(0.5);transform:scale(0.5)}80%{opacity:.8;-moz-transform:scale(1.1);transform:scale(1.1)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@keyframes scale-spring{0%{opacity:.5;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);transform:scale(0.5)}80%{opacity:.8;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}label{display:inline-block}label span{display:block;margin-left:20px;height:30px;line-height:30px}label input[type=checkbox],label input[type=radio]{margin:7px 0px 0px 0px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;width:16px;height:16px;cursor:pointer;vertical-align:center;background:#fff;border:2px solid #28bd8b;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;float:left}label input[type=checkbox]:checked:after,label input[type=radio]:checked:after{content:"";display:block;width:8px;height:8px;background:#28bd8b;-webkit-animation-name:scale-spring;-moz-animation-name:scale-spring;animation-name:scale-spring;-webkit-animation-duration:.3s;-moz-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}label input[type=checkbox]:disabled,label input[type=radio]:disabled{border-color:#cecece}label input[type=checkbox]:disabled:after,label input[type=radio]:disabled:after{background-color:#cecece}label input[type=radio],label input[type=radio]:checked:after{-moz-border-radius:50%;border-radius:50%}
</style>
</head>
<body>
<label>
<input type="checkbox" /><span>1111</span></label>
<label>
<input type="checkbox" disabled="disabled" /><span>222</span></label>
<label>
<input type="checkbox" checked="checked" disabled="disabled" /><span>222</span></label>
<label>
<input type="radio" name="test" /><span>aaa</span></label>
<label>
<input type="radio" name="test" /><span>bbb</span></label>
</body>
</html>scss源码
@-webkit-keyframes scale-spring {
0% {
opacity: .5;
-webkit-transform: scale(0.5);
transform: scale(0.5)
}
80% {
opacity: .8;
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-moz-keyframes scale-spring {
0% {
opacity: .5;
-moz-transform: scale(0.5);
transform: scale(0.5)
}
80% {
opacity: .8;
-moz-transform: scale(1.1);
transform: scale(1.1)
}
100% {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1)
}
}
@keyframes scale-spring {
0% {
opacity: .5;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5)
}
80% {
opacity: .8;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1)
}
}
label {
display: inline-block;
span {
display: block;
margin-left: 20px;
height: 30px;
line-height: 30px;
}
input[type=checkbox],
input[type=radio] {
margin: 7px 0px 0px 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 16px;
height: 16px;
cursor: pointer;
vertical-align: center;
background: #fff;
border: 2px solid #28bd8b;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
float: left;
&:checked:after {
content: "";
display: block;
width: 8px;
height: 8px;
background: #28bd8b;
-webkit-animation-name: scale-spring;
-moz-animation-name: scale-spring;
animation-name: scale-spring;
-webkit-animation-duration: .3s;
-moz-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
&:disabled {
border-color: #cecece;
}
&:disabled:after {
background-color: #cecece;
}
}
input[type=radio],
input[type=radio]:checked:after {
-moz-border-radius: 50%;
border-radius: 50%;
}
}
