首页 > 编程 > HTML > 正文

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

2019-10-26 17:18:25
字体：大 中 小
来源：转载
供稿：网友

HTML的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>  
    		•
    发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表
    学习交流
    更多

    电脑开不了机的原因和解决办法

    电脑开不了机的原因和解决办法...
    热门图片
    更多
    猜你喜欢的新闻
    猜你喜欢的关注

    新闻热点

    荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布
    2019-10-23 09:17:05
    搜狐张朝阳：回归媒体是搜狐重新崛起的关键
    2019-10-21 09:20:02
    华为轮值董事长郭平：虚拟技术创造现实价值
    2019-10-21 09:00:12
    滴滴英文服务上线两周年 用户已超200万
    2019-09-26 08:57:12
    华为推出全球至快AI训练集群Atlas900
    2019-09-25 08:46:36
    马斯克：特斯拉正组建中国技术团队
    2019-09-25 08:15:43

    疑难解答

    图片精选

    网友关注

    关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
    Copyright © 2008 - 2019 VEVB.COM. All Rights Reserved.武林网 版权所有