您现在的位置是：网站首页> 编程资料编程资料

HTML的checkbox和radio样式美化的简单实例HTML5实现的自定义Checkbox和Radiobox 很酷的选中动画效果源码通过jQuery实现自定义可以替代html自带的checkbox和radiobox

2023-10-09 319人已围观

简介 下面小编就为大家带来一篇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" 提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：详解HTML/XHTML中img图像标签的基本用法HTML中img标签只显示图片中心位置的方法(三种方法)HTMLimg标签的alt属性和title属性使用介绍HTML图片img标签_动力节点Java学院整理

    下一篇：编写灵活、稳定、高质量的HTML和css代码规范指南CSS代码书写规范究极指南全面总结CSS代码的编写规范及优化建议css代码缩写 div+css布局代码简写规范19楼论坛的前端CSS代码规范介绍让样式表CSS代码更加专业规范闭合浮动元素让CSS代码更规范-CSS教程-网页制作-网页教学网分享20条编写 CSS 代码的建议

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网