首页前端开发HTMLHTML的checkbox和radio样式美化的简单实例

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

时间2024-01-27 13:42:03发布访客分类HTML浏览301
导读：收集整理的这篇文章主要介绍了HTML的checkbox和radio样式美化的简单实例，觉得挺不错的，现在分享给大家，也给大家做个参考。 HTML的checkbox和radio样式美化的简单实例checkbox：XML/HTML C...
收集整理的这篇文章主要介绍了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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

checkboxHTML

若转载请注明出处： HTML的checkbox和radio样式美化的简单实例
本文地址： https://pptw.com/jishu/588274.html
HTML绘制用户注册页面 Html+CSS绘制三角形图标

游客 回复需填写必要信息
↑