亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

HTML的checkbox和radio樣式美化的簡單實例

  發(fā)布時間：2016-06-08 11:03:26   作者：佚名   我要評論
下面小編就為大家?guī)硪黄狧TML的checkbox和radio樣式美化的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

HTML的checkbox和radio樣式美化的簡單實例

checkbox：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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復(fù)制內(nèi)容到剪貼板
  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樣式美化的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

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

相關(guān)文章

最新評論