checkbox：
style type=text/css> input[type=checkbox] { display: none; } input[type=checkbox] + label { display: inline-block; position: relative; border: solid 2px #99a1a7; width: 35px; height: 35px; line-height: 35px; border-radius: 4px; } input[type=checkbox]:checked + label:after { content: '\2714'; font-size: 25px; color: #99a1a7; width: 35px; height: 35px; line-height: 35px; position: absolute; text-align: center; background-color: #e9ecee; } .tab { margin-top: 20px; margin-bottom: 20px; width: 100%; } .tab td { border: solid 1px #f99; font-size: 25px; line-height: 39px; }style>table class=tab cellpadding=0 cellspacing=0 style=border-collapse: collapse;> tr> td> div align=center style=float: left; height: 39px; width: 39px;> input id=ck101 type=checkbox /> label for=ck101>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试101 div> div align=center style=float: left; height: 39px; width: 39px;> input id=ck102 type=checkbox /> label for=ck102>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试102 div> 测试 td> td>td> tr> tr> td style=text-align: center;> div style=display: inline-block;> div align=center style=float: left; height: 39px; width: 39px;> input id=ck103 type=checkbox /> label for=ck103>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试103 div> div align=center style=float: left; height: 39px; width: 39px;> input id=ck104 type=checkbox /> label for=ck104>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试104 div> 测试 div> td> td>测试 td> tr>table>div style=border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;> div align=center style=float: left; height: 39px; width: 39px;> input id=ck201 type=checkbox /> label for=ck201>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试201 div> div align=center style=float: left; height: 39px; width: 39px;> input id=ck202 type=checkbox /> label for=ck202>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;> 测试202 div>div>
view code
radio：
style type=text/css> input[type=radio] { display: none; } input[type=radio] + label { display: inline-block; position: relative; border: solid 2px #99a1a7; width: 25px; height: 25px; line-height: 25px; padding: 5px; border-radius: 19.5px; } input[type=radio]:checked + label:after { content: ' '; font-size: 25px; color: #99a1a7; width: 25px; height: 25px; line-height: 25px; position: absolute; text-align: center; background-color: #99a1a7; border-radius: 12.5px; } input[type=radio]:checked + label { background-color: #e9ecee; } .tab { margin-top: 20px; margin-bottom: 20px; width: 100%; } .tab td { border: solid 1px #f99; font-size: 25px; line-height: 39px; }style>table class=tab cellpadding=0 cellspacing=0 style=border-collapse: collapse;> tr> td> div align=center style=float: left; height: 39px; width: 39px;> input id=rd101 name=rd type=radio /> label for=rd101>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试101 div> div align=center style=float: left; height: 39px; width: 39px;> input id=rd102 name=rd type=radio /> label for=rd102>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试102 div> 测试 td> td>td> tr> tr> td style=text-align: center;> div style=display: inline-block;> div align=center style=float: left; height: 39px; width: 39px;> input id=rd103 name=rd type=radio /> label for=rd103>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试103 div> div align=center style=float: left; height: 39px; width: 39px;> input id=rd104 name=rd type=radio /> label for=rd104>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试104 div> 测试 div> td> td>测试 td> tr>table>div style=border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;> div align=center style=float: left; height: 39px; width: 39px;> input id=rd201 name=rd type=radio /> label for=rd201>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;> 测试201 div> div align=center style=float: left; height: 39px; width: 39px;> input id=rd202 name=rd type=radio /> label for=rd202>label> div> div style=float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;> 测试202 div>div>
view code
效果图：