CSS3 checkbox复选框和radio单选框美化效果
分类：实例代码
CSS3之前要美化单选框和复选框无非是使用图片进行相关的替换操作，并且还有很大的局限性，CSS3的出现，一切变的轻松起来，效果非常的绚丽，下面就分享一段能够实现此功能的代码实例，需要的朋友可以做一下参考。
代码实例如下:
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<head>
<style type="text/css">
@keyframes click-wave{
0%{
width:40px;
height:40px;
opacity:0.35;
position: relative;
}
100%{
width:200px;
height:200px;
margin-left:-80px;
margin-top:-80px;
opacity:0.0;
}
}
.option-input{
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
appearance:none;
position:relative;
top:13.33333px;
width:40px;
height:40px;
transition:all 0.15s ease-out 0;
background:#cbd1d8;
border:none;
color:#fff;
cursor:pointer;
display:inline-block;
outline:none;
position:relative;
margin-right:0.5rem;
z-index:1000;
}
.option-input:hover{
background:#9faab7;
}
.option-input:checked{
background:#40e0d0;
}
.option-input:checked::before{
width:40px;
height:40px;
position:absolute;
content:'16';
display:inline-block;
font-size:26.66667px;
text-align:center;
line-height:40px;
}
.option-input:checked::after{
animation:click-wave 0.65s;
background:#40e0d0;
content:'';
display:block;
position:relative;
z-index:100;
}
.option-input.radio{
border-radius:50%;
}
.option-input.radio::after{
border-radius:50%;
}
body{
display:-webkit-box;
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-pack:start;
-moz-box-pack:start;
box-pack:start;
-webkit-box-align:stretch;
-moz-box-align:stretch;
box-align:stretch;
background:#e8ebee;
color:#9faab7;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
text-align:center;
}
body div{
padding:5rem;
}
body label{
display:block;
line-height:40px;
}
</style>
</head>
<body>
<div style="width:200px;float:left">
<label><input type="checkbox" class="option-input checkbox" checked="">Checkbox </label>
<label><input type="checkbox" class="option-input checkbox">Checkbox</label>
<label><input type="checkbox" class="option-input checkbox">Checkbox</label>
</div>
<div style="width:200px;float:left">
<label><input type="radio" class="option-input radio" name="example">Radio option</label>
<label><input type="radio" class="option-input radio" name="example">Radio option</label>
<label><input type="radio" class="option-input radio" name="example">Radio option</label>
</div>
</body>
</html>
