简介
网页上常见的种种UI效果我们经常感觉太漂亮了。接下来的几天我们会一直来使用CSS3来制作一些常见的UI效果，来改变浏览器默认UI效果。请大家持续关注。今天我们要分享的是关于浏览器的表单元素中最让人头疼的单选和复选框的效果。同样的会贴上视频。
常见的网页UI效果
案例效果
技巧说明
使用CSS3伪类：checked :before :disabled来进行制作，同样的要取消掉浏览器的默认效果，使用-webkit-appearance: none来去掉，为了看到更好的效果我们使用iconfont。详细效果请参见视频：
代码：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/iconfont.css" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
input[type="checkbox"],
input[type="radio"] {
font-family: "iconfont" !important;
font-size: 25px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
input[type="checkbox"],input[type="radio"] {
width: 30px;
height: 30px;
outline: none;
-webkit-appearance: none;
}
input[type="checkbox"]:before {
content: "\e720";
display: block;
width: 100%;
height: 100%;
color: rgb(200,200,200);
}
input[type="checkbox"]:checked:before {
content: "\e722";
display: block;
width: 100%;
height: 100%;
color: dodgerblue;
}
input[type="checkbox"]:disabled:before {
content: "\e720";
display: block;
width: 100%;
height: 100%;
color: #efefef;
}
input[type="radio"]:before {
content: "\e72f";
display: block;
width: 100%;
height: 100%;
color: rgb(200,200,200);
}
input[type="radio"]:checked:before {
content: "\e71f";
display: block;
width: 100%;
height: 100%;
color: dodgerblue;
}
input[type="radio"]:disabled:before {
content: "\e72f";
display: block;
width: 100%;
height: 100%;
color: #efefef;
}
</style>
</head>
<body>
<div>
<input type="checkbox" name="aa" checked="checked" />
</div>
<div>
<input type="checkbox" name="bb" />
</div>
<div>
<input type="checkbox" name="cc" disabled="disabled" />
</div>
<div>
<input type="radio" name="sex" checked="checked" />
</div>
<div>
<input type="radio" name="sex" />
</div>
<div>
<input type="radio" name="sex" disabled="disabled" />
</div>
</body>
</html>
网友评论