HTML的checkbox和radio的美化 原文:HTML的checkbox和radio的美化

checkbox和radio的美化

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;">測(cè)試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;">測(cè)試102</div>測(cè)試</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;">測(cè)試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;">測(cè)試104</div>測(cè)試</div></td><td>測(cè)試</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;">測(cè)試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;">測(cè)試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;">測(cè)試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;">測(cè)試102</div>測(cè)試</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;">測(cè)試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;">測(cè)試104</div>測(cè)試</div></td><td>測(cè)試</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;">測(cè)試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;">測(cè)試202</div> </div> View Code

?效果圖：

posted on 2015-06-27 10:27 NET未來(lái)之路 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/4603699.html

總結(jié)

以上是生活随笔為你收集整理的HTML的checkbox和radio的美化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。