HTML的checkbox和radio样式美化的简单实例
checkbox：
XML/HTML Code 复制内容到剪贴板
< 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 >
radio：
XML/HTML Code 复制内容到剪贴板
< 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 >
效果图：
以上这篇HTML的checkbox和radio样式美化的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://HdhCmsTestcnblogs测试数据/shouce/archive/2016/06/08/5569173.html
查看更多关于HTML的checkbox和radio样式美化的简单实例的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did37549