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;">測試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

?效果圖：

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

轉載于:https://www.cnblogs.com/lonelyxmas/p/4603699.html

總結

以上是生活随笔為你收集整理的HTML的checkbox和radio的美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。