网页制作 
首页 > 网页制作 > 浏览文章

HTML的checkbox和radio样式美化的简单实例

(编辑：jimmy 日期: 2024/12/22 浏览：3 次 )

HTML的checkbox和radio样式美化的简单实例

checkbox：

XML/HTML Code复制内容到剪贴板
  1. <style type="text/css">  
  2.     input[type="checkbox"]   
  3.     {   
  4.         display: none;   
  5.     }   
  6.   
  7.         input[type="checkbox"] + label   
  8.         {   
  9.             display: inline-block;   
  10.             position: relative;   
  11.             border: solid 2px #99a1a7;   
  12.             width: 35px;   
  13.             height: 35px;   
  14.             line-height: 35px;   
  15.             border-radius: 4px;   
  16.         }   
  17.   
  18.         input[type="checkbox"]:checked + label:after   
  19.         {   
  20.             content: '\2714';   
  21.             font-size: 25px;   
  22.             color: #99a1a7;   
  23.             width: 35px;   
  24.             height: 35px;   
  25.             line-height: 35px;   
  26.             position: absolute;   
  27.             text-align: center;   
  28.             background-color: #e9ecee;   
  29.         }   
  30.   
  31.     .tab   
  32.     {   
  33.         margin-top: 20px;   
  34.         margin-bottom: 20px;   
  35.         width: 100%;   
  36.     }   
  37.   
  38.         .tab td   
  39.         {   
  40.             border: solid 1px #f99;   
  41.             font-size: 25px;   
  42.             line-height: 39px;   
  43.         }   
  44. </style>  
  45.   
  46. <table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">  
  47.     <tr>  
  48.         <td>  
  49.             <div align="center" style="float: left; height: 39px; width: 39px;">  
  50.                 <input id="ck101" type="checkbox" />  
  51.                 <label for="ck101"></label>  
  52.             </div>  
  53.             <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  54.                 测试101   
  55.             </div>  
  56.             <div align="center" style="float: left; height: 39px; width: 39px;">  
  57.                 <input id="ck102" type="checkbox" />  
  58.                 <label for="ck102"></label>  
  59.             </div>  
  60.             <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  61.                 测试102   
  62.             </div>  
  63.             测试   
  64.         </td>  
  65.         <td></td>  
  66.     </tr>  
  67.     <tr>  
  68.         <td style="text-align: center;">  
  69.             <div style="display: inline-block;">  
  70.                 <div align="center" style="float: left; height: 39px; width: 39px;">  
  71.                     <input id="ck103" type="checkbox" />  
  72.                     <label for="ck103"></label>  
  73.                 </div>  
  74.                 <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  75.                     测试103   
  76.                 </div>  
  77.                 <div align="center" style="float: left; height: 39px; width: 39px;">  
  78.                     <input id="ck104" type="checkbox" />  
  79.                     <label for="ck104"></label>  
  80.                 </div>  
  81.                 <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  82.                     测试104   
  83.                 </div>  
  84.                 测试   
  85.             </div>  
  86.         </td>  
  87.         <td>测试   
  88.         </td>  
  89.     </tr>  
  90. </table>  
  91.   
  92. <div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">  
  93.     <div align="center" style="float: left; height: 39px; width: 39px;">  
  94.         <input id="ck201" type="checkbox" />  
  95.         <label for="ck201"></label>  
  96.     </div>  
  97.     <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  98.         测试201   
  99.     </div>  
  100.     <div align="center" style="float: left; height: 39px; width: 39px;">  
  101.         <input id="ck202" type="checkbox" />  
  102.         <label for="ck202"></label>  
  103.     </div>  
  104.     <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">  
  105.         测试202   
  106.     </div>  
  107. </div>  

radio：

XML/HTML Code复制内容到剪贴板
  1. <style type="text/css">  
  2.     input[type="radio"]   
  3.     {   
  4.         display: none;   
  5.     }   
  6.   
  7.         input[type="radio"] + label   
  8.         {   
  9.             display: inline-block;   
  10.             position: relative;   
  11.             border: solid 2px #99a1a7;   
  12.             width: 25px;   
  13.             height: 25px;   
  14.             line-height: 25px;   
  15.             padding: 5px;   
  16.             border-radius: 19.5px;   
  17.         }   
  18.   
  19.         input[type="radio"]:checked + label:after   
  20.         {   
  21.             content: ' ';   
  22.             font-size: 25px;   
  23.             color: #99a1a7;   
  24.             width: 25px;   
  25.             height: 25px;   
  26.             line-height: 25px;   
  27.             position: absolute;   
  28.             text-align: center;   
  29.             background-color: #99a1a7;   
  30.             border-radius: 12.5px;   
  31.         }   
  32.   
  33.         input[type="radio"]:checked + label   
  34.         {   
  35.             background-color: #e9ecee;   
  36.         }   
  37.   
  38.     .tab   
  39.     {   
  40.         margin-top: 20px;   
  41.         margin-bottom: 20px;   
  42.         width: 100%;   
  43.     }   
  44.   
  45.         .tab td   
  46.         {   
  47.             border: solid 1px #f99;   
  48.             font-size: 25px;   
  49.             line-height: 39px;   
  50.         }   
  51. </style>  
  52.   
  53. <table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">  
  54.     <tr>  
  55.         <td>  
  56.             <div align="center" style="float: left; height: 39px; width: 39px;">  
  57.                 <input id="rd101" name="rd" type="radio" />  
  58.                 <label for="rd101"></label>  
  59.             </div>  
  60.             <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  61.                 测试101   
  62.             </div>  
  63.             <div align="center" style="float: left; height: 39px; width: 39px;">  
  64.                 <input id="rd102" name="rd" type="radio" />  
  65.                 <label for="rd102"></label>  
  66.             </div>  
  67.             <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  68.                 测试102   
  69.             </div>  
  70.             测试   
  71.         </td>  
  72.         <td></td>  
  73.     </tr>  
  74.     <tr>  
  75.         <td style="text-align: center;">  
  76.             <div style="display: inline-block;">  
  77.                 <div align="center" style="float: left; height: 39px; width: 39px;">  
  78.                     <input id="rd103" name="rd" type="radio" />  
  79.                     <label for="rd103"></label>  
  80.                 </div>  
  81.                 <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  82.                     测试103   
  83.                 </div>  
  84.                 <div align="center" style="float: left; height: 39px; width: 39px;">  
  85.                     <input id="rd104" name="rd" type="radio" />  
  86.                     <label for="rd104"></label>  
  87.                 </div>  
  88.                 <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  89.                     测试104   
  90.                 </div>  
  91.                 测试   
  92.             </div>  
  93.         </td>  
  94.         <td>测试   
  95.         </td>  
  96.     </tr>  
  97. </table>  
  98.   
  99. <div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">  
  100.     <div align="center" style="float: left; height: 39px; width: 39px;">  
  101.         <input id="rd201" name="rd" type="radio" />  
  102.         <label for="rd201"></label>  
  103.     </div>  
  104.     <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
  105.         测试201   
  106.     </div>  
  107.     <div align="center" style="float: left; height: 39px; width: 39px;">  
  108.         <input id="rd202" name="rd" type="radio" />  
  109.         <label for="rd202"></label>  
  110.     </div>  
  111.     <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">  
  112.         测试202   
  113.     </div>  
  114. </div>  

 效果图：

HTML的checkbox和radio样式美化的简单实例

HTML的checkbox和radio样式美化的简单实例

以上这篇HTML的checkbox和radio样式美化的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/shouce/archive/2016/06/08/5569173.html

上一篇：html+css3太阳系行星运转动画效果的实现代码
下一篇：PHP-HTMLhtml重要知识点笔记(必看)
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。