<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>源码小筑-CSS3复选框和单选按钮美化</title>
<style type="text/css">
#holder {
width: 100%
}
.regular-checkbox {
display: none
}
.regular-checkbox + label {
background-color: #fafafa
border: 1px solid #cacece
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)
padding: 9px
border-radius: 3px
display: inline-block
position: relative
}
.regular-checkbox:checked + label {
background-color: #e9ecee
border: 1px solid #adb8c0
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1)
color: #99a1a7
}
.regular-checkbox:checked + label:after {
content: '\2714'
font-size: 14px
position: absolute
top: -15px
left: 3px
color: red
}
.big-checkbox + label {
padding: 18px
}
.big-checkbox:checked + label:after {
font-size: 50px
left: 15px
}
</style>
</head>
<body>
<div id="holder">
<center>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>
</center>
</div>
</body>
</html>
顺便打个广告，推荐一个特效网站 源码小筑-http://www.codevillas.com，呵呵
该符号一般只能在办公软件中打出，下面用WORD 2007演示输入方法：
一、打开Word文档，进入插入选项卡。
二、点击符号—更多。
三、进入数学符号内，双击输入一个对勾符号。
四、选中该符号，进入开始选项卡，点击带圈符号。
五、选中方框，点击确定即可更改为方框内对勾符号。
.box {width: 150px
height: 150px
margin: 100px auto
border-radius : 5e%
border: 5px solid #o0000e
display: flex
justify-content: center
align-items : center
}
.box: : before {
content: ""
display: block
width: 88px
height: 5epx
border: 20px solid #ee000e
border-right: none
border-top: none
transform: rotate(-45deg) translate(7px，-10px)
}
