ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML チェックボックスとラジオ美化_html/css_WEB-ITnose
HTML チェックボックスとラジオ美化_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:241258ブラウズ
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> 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> 效果图：
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。