这几天更新了博客模板，然后空闲时间做了一个利用符号字体美化表单，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo-Radio/checked</title>
<style media="screen">
@font-face {
font-family: 'myfont';
src: url('./fonts/iconfont.ttf');
/*src: url('./fonts/iconfont.eot');
src: url('./fonts/iconfont.svg');
src: url('./fonts/iconfont.woff');*/
}
input[type=radio],input[type=checkbox]{
width: 18px;
height: 18px;
display: inline-block;
background-color: #e9eef2;
color: #555;clear:
none;cursor:
pointer;line-height: 0;
outline: 0;
padding: 0 !important;
text-align: center;
ertical-align: middle;
/*appearance:none;*/
/*-moz-appearance:none;*/
-webkit-appearance: none;
}
input[type=radio]{
border-radius: 50%;
}
input[type=checkbox]:checked:before, input[type=radio]:checked:before {
float: left;
color: #fff;
font-size: 13px;
display: inline-block;
vertical-align: middle;
width: 15px;
margin-top: 9px;
margin-left: 1px;
font-family: "myfont";
content: "\e6b5";
}
input[type=radio]:checked,input[type=checkbox]:checked{
background-color: #f66;
}
</style>
</head>
<body>
<input type="radio" name="sig" value="" checked>男
<input type="radio" name="sig" value="" >女<br>
<input type="checkbox" name="interest" value="" checked>唱歌
<input type="checkbox" name="interest" value="">乒乓球
<input type="checkbox" name="interest" value="">篮球
<input type="checkbox" name="interest" value="" checked>游泳
</body>
</html>
评论前必须登录！
注册