当前位置：Gxlcms > css > div仿checkbox表单样式的美化和功能

div仿checkbox表单样式的美化和功能

时间：2021-07-01 10:21:17 帮助过：67人阅读

checkbox的样式不好看，p仿checkbox表单样式美化及功能，素材在底部，需要的朋友可以参考下

p仿checkbox表单样式美化及功能（checkbox的样式不好看）素材在底部：
效果图：

window.css 

  1. .bj { 
  2. position: absolute; 
  3. top: 0; 
  4. left: 0; 
  5. bottom: 1px; 
  6. width: 100 % ; 
  7. height: 980px; 
  8. z - index: 9; 
  9. background - color: #000; 
  10. filter: alpha(opacity = 50); - moz - opacity: 0.5; - khtml - opacity: 0.5; 
  11. opacity: 0.5; 
  12. } 
  13. .window { 
  14. position: absolute; 
  15. top: 106px; 
  16. left: 33 % ; 
  17. width: 466px; 
  18. background - color: #fff; 
  19. color: #000; 
  20. border - bottom: 1px solid#dbdcdd; 
  21. padding - bottom: 8px; 
  22. overflow: hidden; 
  23. z - index: 10; 
  24. }.window.top { 
  25. width: 416px; 
  26. padding: 0px 25px 0 25px; 
  27. height: 48px; 
  28. line - height: 48px; 
  29. font - size: 18px; 
  30. background - color: #ececec; 
  31. border - bottom: 1px solid#d8d8d8; 
  32. overflow: hidden; 
  33. }.window.top.close { 
  34. float: right; 
  35. margin - top: 14px; 
  36. }.window.top span { 
  37. padding: 0 6px; 
  38. } 
  39. .window.add { 
  40. width: 394px; 
  41. margin: 0 auto; 
  42. padding - top: 10px; 
  43. font - size: 15px; 
  44. color: #686868; 
  45. overflow: hidden; 
  46. }.window.add dd, 
  47. .window.add dt { 
  48. width: 100 % ; 
  49. padding - bottom: 8px; 
  50. line - height: 38px; 
  51. overflow: hidden; 
  52. }.window.add span { 
  53. float: left; 
  54. width: 69px; 
  55. overflow: hidden; 
  56. }.window.add dd input { 
  57. width: 314px; 
  58. height: 36px; 
  59. line - height: 36px; 
  60. border: 1px solid#c9c5c1; 
  61. background - color: #f2f2f2; 
  62. font - family: "微软雅黑", 
  63. "宋体"; 
  64. font - size: 15px; 
  65. color: #686868; 
  66. }.window.add dt input { 
  67. vertical - align: middle; 
  68. margin - right: 10px; 
  69. }.window.add dt label { 
  70. margin - right: 10px; 
  71. margin - left: 20px; 
  72. }.window.add dt label.perlabel { 
  73. margin - left: 0px; 
  74. }.window.add dd input.two { 
  75. width: 192px; 
  76. height: 33px; 
  77. line - height: 33px; 
  78. border: none; 
  79. background: url('../images/input09.gif') no - repeat; 
  80. margin - right: 13px; 
  81. }.window.add dd a { 
  82. margin - left: 10px; 
  83. font - size: 16px; 
  84. }.window.add dt.button { 
  85. text - align: center; 
  86. padding - top: 8px; 
  87. }.window.add dt.button input { 
  88. width: 103px; 
  89. height: 41px; 
  90. line - height: 39px; 
  91. text - align: center; 
  92. border: none; 
  93. background: url('../images/input06.gif') no - repeat; 
  94. margin: 0 5px; 
  95. font - family: "微软雅黑", 
  96. "宋体"; 
  97. font - size: 15px; 
  98. color: #686868; 
  99. }.window.post { 
  100. width: 420px; 
  101. }.window.post span { 
  102. width: 86px; 
  103. }.window.post dt { 
  104. line - height: 26px; 
  105. }.window.post dt span { 
  106. height: 108px; 
  107. line - height: 108px; 
  108. }.window.post dt label { 
  109. width: 100px; 
  110. float: left; 
  111. }.window.post dt label.perlabel { 
  112. float: none; 
  113. }.window.post textarea { 
  114. width: 312px; 
  115. height: 62px; 
  116. line - height: 24px; 
  117. border: 1px solid#c9c5c1; 
  118. background - color: #f2f2f2; 
  119. font - family: "微软雅黑", 
  120. "宋体"; 
  121. font - size: 14px; 
  122. color: #686868; 
  123. }.window.post dd input.three { 
  124. width: 238px; 
  125. margin - right: 10px; 
  126. }.window. 
  127. default { 
  128. width: 
  129. 406px; 
  130. } 
  131. .window. 
  132. default span { 
  133. width: 
  134. 52px; 
  135. }.window. 
  136. default dd select { 
  137. width: 
  138. 38px; 
  139. margin: 
  140. 0 6px; 
  141. }.window. 
  142. default dd textarea { 
  143. width: 
  144. 350px; 
  145. }.window. 
  146. default dd b { 
  147. float: 
  148. right; 
  149. margin - right: 5px; 
  150. font - weight: normal; 
  151. }.window. 
  152. default dd b input { 
  153. width: 
  154. auto; 
  155. height: 
  156. auto; 
  157. margin - right: 5px; 
  158. }

页面中的css 

  1. <span style="font-size:12px;"><style type="text/css"> 
  2. .window{ 
  3. left:25%; 
  4. width:676px; 
  5. } 
  6. .window .top{ 
  7. width:626px; 
  8. } 
  9. .window span{ 
  10. font-family:"微软雅黑"; 
  11. font-weight: bold; 
  12. } 
  13. .window .post{ 
  14. width:645px; 
  15. } 
  16. .window .post label{ 
  17. font-size: 13px; 
  18. } 
  19. .window dl{ 
  20. margin-left:25px !important; 
  21. } 
  22. .window .post hr{ 
  23. width:230px; 
  24. text-align: left; 
  25. margin-bottom: 20px; 
  26. } 
  27. .window .add dd p{ 
  28. width:125px; 
  29. float:left; 
  30. vertical-align: middle; 
  31. height: 18px; 
  32. line-height: 18px; 
  33. } 
  34. .custom_checkbox_self{ 
  35. width:18px; 
  36. height:18px; 
  37. text-indent:100px; 
  38. overflow:hidden; 
  39. float:left; 
  40. background:url(../images/custom_checkbox.png); 
  41. margin-right:10px; 
  42. } 
  43. </style></span>

js函数： 

  1. function openJoinSetting(){ 
  2. var joinSetting = document.getElementById('joinSetting'); 
  3. joinSetting.style.display='block'; 
  4. joinSetting.style.visibility='visible'; 
  5. document.getElementById('back2').style.display='block'; 
  6. document.getElementById('wiSsetting').style.display='block'; 
  7. } 
  8. $(document).ready(function(){ 
  9. $(".custom_checkbox_self").click(function(){ 
  10. if($(this).text().trim()=="0"){ 
  11. $(this).css("background","url(../images/custom_checkbox_checked.png)"); 
  12. $(this).text('1'); 
  13. }else{ 
  14. $(this).css("background","url(../images/custom_checkbox.png)"); 
  15. $(this).text('0'); 
  16. } 
  17. }); 
  18. });

窗口代码： 

  1. <p id="joinSetting" style="display: none; visibility: hidden; "> 
  2. <p id="back2" class="bj"></p> 
  3. <p id="wiSsetting" class="window"> 
  4. <p class="top"> 
  5. <a href="javascript:closealbum();" class="close"><img 
  6. src="../images/icon03.gif" alt="关闭" /> </a>申请表必填项设置</p> 
  7. <dl class="add post"> 
  8. <dd> 
  9. <span>基本信息</span><br/> 
  10. <hr/> 
  11. <p><p id="MemberName" style="width:18px;" class="custom_checkbox_self">0</p><label for="MemberName">姓名</label></p> 
  12. <p><p id="Phone" style="width:18px;" class="custom_checkbox_self">0</p><label for="Phone">手机</label></p> 
  13. <p><p id="Company" style="width:18px;" class="custom_checkbox_self">0</p><label for="Company">企业</label></p> 
  14. <p><p id="Post" style="width:18px;" class="custom_checkbox_self">0</p><label for="Post">企业职位</label></p> 
  15. <p><p id="applyPosiGuid" style="width:18px;" class="custom_checkbox_self">0</p><label for="applyPosiGuid">申请职务</label></p> 
  16. </dd> 
  17. <dd> 
  18. <span>详细信息</span><br/> 
  19. <hr/> 
  20. <p><p id="Hometown" style="width:18px;" class="custom_checkbox_self">0</p><label for="Hometown">籍贯</label></p> 
  21. <p><p id="Gender" style="width:18px;" class="custom_checkbox_self">0</p><label for="Gender">性别</label></p> 
  22. <p><p id="Birthday" style="width:18px;" class="custom_checkbox_self">0</p><label for="Birthday">生日</label></p> 
  23. <p><p id="Nation" style="width:18px;" class="custom_checkbox_self">0</p><label for="Nation">民族</label></p> 
  24. <p><p id="Party" style="width:18px;" class="custom_checkbox_self">0</p><label for="Party">政治面貌</label></p> 
  25. <p><p id="IdentityCard" style="width:18px;" class="custom_checkbox_self">0</p><label for="IdentityCard">身份证</label></p> 
  26. <p><p id="EducationLevel" style="width:18px;" class="custom_checkbox_self">0</p><label for="EducationLevel">学历</label></p> 
  27. <p><p id="Telephone" style="width:18px;" class="custom_checkbox_self">0</p><label for="Telephone">电话</label></p> 
  28. <p><p id="Fax" style="width:18px;" class="custom_checkbox_self">0</p><label for="Fax">传真</label></p> 
  29. <p><p id="Email" style="width:18px;" class="custom_checkbox_self">0</p><label for="Email">邮箱</label></p> 
  30. </dd> 
  31. <dd> 
  32. <span>企业信息</span><br/> 
  33. <hr/> 
  34. <p><p id="CompanyAddress" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyAddress">地址</label></p> 
  35. <p><p id="CompanyStaffNumber" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyStaffNumber">员工数</label></p> 
  36. <p><p id="CompanyLegalPerson" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyLegalPerson">法人代表</label></p> 
  37. <p><p id="CompanyCreatedDate" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyCreatedDate">成立时间</label></p> 
  38. <p><p id="CompanyProperty" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyProperty">企业性质</label></p> 
  39. <p><p id="CompanyIsPublic" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyIsPublic">是否上市</label></p> 
  40. <p><p id="CompanyIndustry" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyIndustry">所属行业</label></p> 
  41. <p><p id="CompanyWebsite" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyWebsite">网址</label></p> 
  42. <p><p id="CompanyAssets" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyAssets">企业资产</label></p> 
  43. </dd> 
  44. <dd> 
  45. <span>附件</span><br/> 
  46. <hr/> 
  47. <p><p id="CompanyPicUrl" style="width:18px;" class="custom_checkbox_self">0</p><label for="CompanyPicUrl">营业执照复印件</label></p> 
  48. <p><p id="IdentityPicUrl" style="width:18px;" class="custom_checkbox_self">0</p><label for="IdentityPicUrl">身份证照片</label></p> 
  49. <p style="width:150px;"><p id="PersionPicUrl" style="width:18px;" class="custom_checkbox_self">0</p><label for="PersionPicUrl">个人名片照片</label></p> 
  50. </dd> 
  51. <dt class="button"> 
  52. <input name="" type="submit" value="确认" onclick=""/> 
  53. <input name="" type="button" value="取消" onclick="" /> 
  54. </dt> 
  55. </dl> 
  56. </p> 
  57. </p>

这是一个弹出层的表单选择。
图片素材：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何解决火狐在用offsetHeight获取div的高度时为0

以上就是div仿checkbox表单样式的美化和功能的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！