• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML的checkbox和radio样式美化的简单实例

    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样式美化的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

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

    上一篇：PHP-HTMLhtml重要知识点笔记(必看)
    下一篇：html+css3太阳系行星运转动画效果的实现代码
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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