字体图标表单\单选框，复选框效果（完整版）
CSS：
1 h1,h2,h3{ font-size: 24px;} 2 a:hover { text-decoration: none; } 3 @font-face {font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */} 4 .iconfont {font-family: "iconfont" !important;font-size: 14px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;} 5 .fl{ float: left;} 6 .fr{ float: right;} 7 .w1000{ width: 1000px; margin: 20px auto;} 8 .clear{ clear: both;} 9 hr{margin: 30px 0;} 10 .simple_footer{margin-top: 0 !important;} 11 .wrap{background: #3399FF; width: 100%; height: 100%; } 12 .wrap p,.wrap input{font-family: "微软雅黑";font-size: 14px;color: #383838;line-height: 32px;} 13 .das{ border-bottom: 1px dashed #FFFFFF;} 14 .DcMian{width: 1200px; margin: 0 auto;} 15 .Dctop01{ background: url(img/DcImg_01.jpg) no-repeat center; height: 468px; margin-bottom: 25px; width: 100%;} 16 .survey{ background: #FFFFFF; padding: 32px 20px; margin: 0 auto; width: 960px;} 17 .survey h1,.survey h2{ text-align: center; height: 50px; line-height: 50px;} 18 .survey p span{line-height: 32px; height: 24px; display: inline-block;padding-top: 8px;} 19 .survey ul li{ margin-bottom: 30px;} 20 .padI_25{padding-left: 12px;} 21 .start{ height: 32px;} 22 .start input{ height: 24px;line-height: 24px; padding: 5px;border: none; border-bottom: 1px solid #f4f4f4; width:800px; background: #FFFFFF;} 23 i{ height: 32px;line-height: 32px; margin:0 5px 0 10px; cursor: pointer;} 24 .tjBtn{ color: #FFFFFF; width: 318px; margin: 44px auto;text-decoration: none; background: #ED4214;-moz-border-radius: 6px;-khtml-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px; } 25 .tjBtn input{ display: block;font-size: 32px; height: 54px; line-height: 54px; color: #FFFFFF; text-align: center; background: none; border: none; width: 100%; cursor: pointer;} 26 .checkbox input, .radio input { display: none;} /*inputy隐藏*/ 27 .radio label:before{ content: "\e60e";}/*默认单选框的样式*/ 28 .checkbox label:before{ content: "\f0011";}/*默认复选框的样式*/ 29 .radio label { cursor: pointer;} 30 .checkbox label { cursor: pointer;} 31 .checkbox label, .radio label{ width: 14px; height: 14px; display: inline-block; vertical-align: top; text-align: center; cursor: pointer; margin: 0 5px 0 10px;} 32 .radio label:hover:before {content: "\e60f"; display: inline-block; height: 32px; line-height: 32px;}/*鼠标浮动上单选框样式*/ 33 .checkbox label:hover:before {content: "\f0012";}/*鼠标浮动上复选框样式*/ 34 .radio input:checked + label:before { content: "\e60f"; display: inline-block; border:none; height: 32px; line-height: 32px;}/*鼠标浮点击后单选框样式*/ 35 .checkbox input:checked + label:before { content: "\f0012";}/*鼠标浮点击后复选框样式*/ 36 .subArea{width: 400px; margin: 20px auto; font-family: "微软雅黑";text-align: center;} 37 .subArea h3{height: 100px; line-height: 90px; font-size: 24px;} 38 .subArea input{ width: 330px; padding: 0 10px; color: #999; height: 38px; line-height: 38px; background: #FFFFFF;} 39 .subArea em{ line-height: 24px; color:#979797;padding-top: 10px; display: inline-block; font-size: 12px;} 40 .subArea .input_area li{ margin-bottom: 10px;}
HTML：
1 <div class="wrap"> 2 <div class="DcMian"> 3 <div class="Dctop01"> 4 </div> 5 6 <form action="" method="post" id="formYhdc"> 7 <div class="survey"> 8 <h1>投资者调查问卷</h1> 9 <ul> 10 <li><p>1、您是从哪一年开始理财或哪一年开始做股票投资的？</p> 11 <p class="padI_25 start">答：<input type="text" name="" id="" value="" /></p> 12 </li> 13 <li><p>2、您目前用于股市投资的资金规模是？（占全部投资理财的比例？）</p> 14 <p class="padI_25"> 15 <span class="radio"><input type="radio" id="radio1" name="radio" /><label for="radio1" class="iconfont"></label>5万以下 16 </span> 17 <span class="radio"><input type="radio" id="radio2" name="radio" /><label for="radio2" class="iconfont"></label>5万~10万 18 </span> 19 <span class="radio"><input type="radio" id="radio3" name="radio" checked="checked" /><label for="radio3" class="iconfont"></label>10万~30万 20 </span> 21 <span class="radio"><input type="radio" id="radio4" name="radio" /><label for="radio4" class="iconfont"></label>30万~100万 22 </span> 23 <span class="radio"><input type="radio" id="radio5" name="radio" /><label for="radio5" class="iconfont"></label>30万~100万 24 </span> 25 <span class="radio"><input type="radio" id="radio6" name="radio" /><label for="radio6" class="iconfont"></label>100万以上 26 </span> 27 </p> 28 </li> 29 <li><p>3、您目前在股市上的投资仓位状况是？</p> 30 <p class="padI_25"> 31 <span class="radio"><input type="radio" id="radio7" name="radio2" /><label for="radio7" class="iconfont"></label>空仓（0） 32 </span> 33 <span class="radio"><input type="radio" id="radio8" name="radio2" /><label for="radio8" class="iconfont"></label>轻仓（30%以下） 34 </span> 35 <span class="radio"><input type="radio" id="radio9" name="radio2" checked="checked" /><label for="radio9" class="iconfont"></label>半仓（30%至60%） 36 </span> 37 <span class="radio"><input type="radio" id="radio10" name="radio2" /><label for="radio10" class="iconfont"></label>重仓（60%至99%） 38 </span> 39 <span class="radio"><input type="radio" id="radio11" name="radio2" /><label for="radio11" class="iconfont"></label>满仓（100%） 40 </span> 41 </p> 42 </li> 43 <li> <p>4、请问2014年以来您投资股票的收益情况是:</p> 44 <p class="padI_25"> 45 <span class="radio"><input type="radio" id="radio12" name="radio3" /><label for="radio12" class="iconfont"></label>空亏损30%以上 46 </span> 47 <span class="radio"><input type="radio" id="radio13" name="radio3" /><label for="radio13" class="iconfont"></label>亏损10%-30% 48 </span> 49 <span class="radio"><input type="radio" id="radio14" name="radio3" checked="checked" /><label for="radio14" class="iconfont"></label>亏损不到10% 50 </span> 51 <span class="radio"><input type="radio" id="radio15" name="radio3" /><label for="radio15" class="iconfont"></label>亏损不到10% 52 </span> 53 <span class="radio"><input type="radio" id="radio16" name="radio3" /><label for="radio16" class="iconfont"></label>赢利10%-30% 54 </span> 55 <span class="radio"><input type="radio" id="radio17" name="radio3" /><label for="radio17" class="iconfont"></label>赢利30%-50% 56 </span> 57 <span class="radio"><input type="radio" id="radio18" name="radio3" /><label for="radio18" class="iconfont"></label>赢利50%以上 58 </span> 59 </p> 60 </li> 61 <li><p>5、请问您在哪家券商开的户？交易佣金费率是多少？</p> 62 <p class="padI_25 start">答：<input type="text" name="" id="" value="" /></p> 63 </li> 64 <li> 65 <p>6、请问您做了其他投资理财或对其他途径感兴趣吗？（可多选）</p> 66 <p class="padI_25 select"> 67 <span class="checkbox"> 68 <input type="checkbox" id="checkbox1" name="ckeckbox" /> 69 <label for="checkbox1" class="iconfont"></label>货币基金 70 </span> 71 <span class="checkbox"> 72 <input type="checkbox" id="checkbox2" name="ckeckbox" /> 73 <label for="checkbox2" class="iconfont"></label>基金定投 74 </span> 75 <span class="checkbox"> 76 <input type="checkbox" id="checkbox3" name="ckeckbox" /> 77 <label for="checkbox3" class="iconfont"></label>黄金 78 </span> 79 <span class="checkbox"> 80 <input type="checkbox" id="checkbox4" name="ckeckbox" /> 81 <label for="checkbox4" class="iconfont"></label>港股 82 </span> 83 <span class="checkbox"> 84 <input type="checkbox" id="checkbox5" name="ckeckbox" /> 85 <label for="checkbox5" class="iconfont"></label>美股 86 </span> 87 <span class="checkbox"> 88 <input type="checkbox" id="checkbox6" name="ckeckbox" /> 89 <label for="checkbox6" class="iconfont"></label>期货 90 </span> 91 <span class="checkbox"> 92 <input type="checkbox" id="checkbox7" name="ckeckbox" /> 93 <label for="checkbox7" class="iconfont"></label>外汇 94 </span> 95 <span class="checkbox"> 96 <input type="checkbox" id="checkbox8" name="ckeckbox" /> 97 <label for="checkbox8" class="iconfont"></label>银行短期理财 98 </span> 99 <span class="checkbox"> 100 <input type="checkbox" id="checkbox9" name="ckeckbox" /> 101 <label for="checkbox9" class="iconfont"></label>P2P理财 102 </span> 103 <span class="checkbox"> 104 <input type="checkbox" id="checkbox10" name="ckeckbox" /> 105 <label for="checkbox10" class="iconfont"></label>其他投资品种 106 </span> 107 <span class="checkbox"> 108 <input type="checkbox" id="checkbox11" name="ckeckbox" /> 109 <label for="checkbox11" class="iconfont"></label>无 110 </span> 111 </p> 112 </li> 113 <li> 114 <p>7、在做投资决策前，请问您投资决策信息的主要来源是？（可多选）</p> 115 <p class="padI_25 select"> 116 <span class="checkbox"> 117 <input type="checkbox" id="checkbox12" name="ckeckbox1" /> 118 <label for="checkbox12" class="iconfont"></label>开户券商提供 119 </span> 120 <span class="checkbox"> 121 <input type="checkbox" id="checkbox13" name="ckeckbox1" /> 122 <label for="checkbox13" class="iconfont"></label>信息咨询机构提供 123 </span> 124 <span class="checkbox"> 125 <input type="checkbox" id="checkbox14" name="ckeckbox1" /> 126 <label for="checkbox14" class="iconfont"></label>朋友或家人提供 127 </span> 128 <span class="checkbox"> 129 <input type="checkbox" id="checkbox15" name="ckeckbox1" /> 130 <label for="checkbox15" class="iconfont"></label>自己在社交媒体及社区上搜集 131 </span> 132 <span class="checkbox"> 133 <input type="checkbox" id="checkbox16" name="ckeckbox1" /> 134 <label for="checkbox16" class="iconfont"></label>自己研究分析 135 </span> 136 <span class="checkbox"> 137 <input type="checkbox" id="checkbox17" name="ckeckbox1" /> 138 <label for="checkbox17" class="iconfont"></label>其它 139 </span> 140 </p> 141 </li> 142 <li> 143 <p>8、您对目前投资理财机构为您所做的投资顾问服务满意吗</p> 144 <p class="padI_25"> 145 <span class="radio"><input type="radio" id="radio19" name="radio4" /><label for="radio19" class="iconfont"></label>非常满意 146 </span> 147 <span class="radio"><input type="radio" id="radio20" name="radio4" /><label for="radio20" class="iconfont"></label>比较满意 148 </span> 149 <span class="radio"><input type="radio" id="radio21" name="radio4" checked="checked" /><label for="radio21" class="iconfont"></label>一般 150 </span> 151 <span class="radio"><input type="radio" id="radio22" name="radio4" /><label for="radio22" class="iconfont"></label>不太满意 152 </span> 153 <span class="radio"><input type="radio" id="radio23" name="radio4" /><label for="radio23" class="iconfont"></label>很不满意 154 </span> 155 </p> 156 </li> 157 <li> 158 <p>9、您希望投资顾问能够为您提供哪些服务？（可多选）</p> 159 <p class="padI_25 select"> 160 <span class="checkbox"> 161 <input type="checkbox" id="checkbox18" name="ckeckbox2" /> 162 <label for="checkbox18" class="iconfont"></label>培训或投资报告会 163 </span> 164 <span class="checkbox"> 165 <input type="checkbox" id="checkbox19" name="ckeckbox2" /> 166 <label for="checkbox19" class="iconfont"></label>提供即时咨询服务 167 </span> 168 <span class="checkbox"> 169 <input type="checkbox" id="checkbox20" name="ckeckbox2" /> 170 <label for="checkbox20" class="iconfont"></label>提供投资研究报告 171 </span> 172 <span class="checkbox"> 173 <input type="checkbox" id="checkbox21" name="ckeckbox2" /> 174 <label for="checkbox21" class="iconfont"></label>机会风险及时提醒 175 </span> 176 <span class="checkbox"> 177 <input type="checkbox" id="checkbox22" name="ckeckbox2" /> 178 <label for="checkbox22" class="iconfont"></label>提供最新相关资讯 179 </span><br /> 180 <span class="checkbox"> 181 <input type="checkbox" id="checkbox23" name="ckeckbox2" /> 182 <label for="checkbox23" class="iconfont"></label>提供投资顾问“一对一”服务（交易提示、推荐产品等） 183 </span> 184 <span class="checkbox"> 185 <input type="checkbox" id="checkbox24" name="ckeckbox2" /> 186 <label for="checkbox24" class="iconfont"></label>其它提供操作指南 187 </span> 188 <span class="checkbox"> 189 <input type="checkbox" id="checkbox25" name="ckeckbox2" /> 190 <label for="checkbox25" class="iconfont"></label>提供良好的互动交流平台 191 </span> 192 <span class="checkbox"> 193 <input type="checkbox" id="checkbox26" name="ckeckbox2" /> 194 <label for="checkbox26" class="iconfont"></label>其它 195 </span> 196 </p> 197 </li> 198 <li> 199 <p>10、您希望投资顾问通过哪些方式为您提供服务？（可多选）</p> 200 <p class="padI_25 select"> 201 <span class="checkbox"> 202 <input type="checkbox" id="checkbox27" name="ckeckbox3" /> 203 <label for="checkbox27" class="iconfont"></label>电子邮件 204 </span> 205 <span class="checkbox"> 206 <input type="checkbox" id="checkbox28" name="ckeckbox3" /> 207 <label for="checkbox28" class="iconfont"></label>手机短信 208 </span> 209 <span class="checkbox"> 210 <input type="checkbox" id="checkbox29" name="ckeckbox3" /> 211 <label for="checkbox29" class="iconfont"></label>客服电话 212 </span> 213 <span class="checkbox"> 214 <input type="checkbox" id="checkbox30" name="ckeckbox3" /> 215 <label for="checkbox30" class="iconfont"></label>手机App应用 216 </span> 217 <span class="checkbox"> 218 <input type="checkbox" id="checkbox31" name="ckeckbox3" /> 219 <label for="checkbox31" class="iconfont"></label>邮局信函 220 </span> 221 <span class="checkbox"> 222 <input type="checkbox" id="checkbox32" name="ckeckbox3" /> 223 <label for="checkbox32" class="iconfont"></label>投资报告会 224 </span> 225 <span class="checkbox"> 226 <input type="checkbox" id="checkbox33" name="ckeckbox3" /> 227 <label for="checkbox33" class="iconfont"></label>专题培训讲座 228 </span> 229 <span class="checkbox"> 230 <input type="checkbox" id="checkbox34" name="ckeckbox3" /> 231 <label for="checkbox34" class="iconfont"></label>其它 232 </span> 233 </p> 234 </li> 235 236 </ul> 237 <hr style=" border: 1px dashed #3399FF; width: 100%; size: 1;"/> 238 <h2>个人基本信息</h2> 239 <ul> 240 <li><p>1.性别:</p> 241 <p class="padI_25"> 242 <span class="radio"><input type="radio" id="radio24" name="radio5" checked="checked" /><label for="radio24" class="iconfont"></label>男 243 </span> 244 <span class="radio"><input type="radio" id="radio25" name="radio5" /><label for="radio25" class="iconfont"></label>女 245 </span> 246 </p> 247 </li> 248 <li><p>2.年龄:</p> 249 <p class="padI_25"> 250 <span class="radio"><input type="radio" id="radio26" name="radio6" checked="checked" /><label for="radio26" class="iconfont"></label>25岁以下 251 </span> 252 <span class="radio"><input type="radio" id="radio27" name="radio6" /><label for="radio27" class="iconfont"></label>25~34岁 253 </span> 254 <span class="radio"><input type="radio" id="radio28" name="radio6" /><label for="radio28" class="iconfont"></label>35~44岁 255 </span> 256 <span class="radio"><input type="radio" id="radio29" name="radio6" /><label for="radio29" class="iconfont"></label>45~54岁 257 </span> 258 <span class="radio"><input type="radio" id="radio30" name="radio6" /><label for="radio30" class="iconfont"></label>55岁以上 259 </span> 260 </p> 261 </li> 262 <li><p>3.请问您的职业是:</p> 263 <p class="padI_25"> 264 <span class="radio"><input type="radio" id="radio31" name="radio7" checked="checked" /><label for="radio31" class="iconfont"></label>企（事）业单位普通职员 265 </span> 266 <span class="radio"><input type="radio" id="radio32" name="radio7" /><label for="radio32" class="iconfont"></label>企（事）业单位中高级管理人员 267 </span> 268 <span class="radio"><input type="radio" id="radio33" name="radio7" /><label for="radio33" class="iconfont"></label>企业主-经营者-事业单位领导 269 </span> 270 <span class="radio"><input type="radio" id="radio34" name="radio7" /><label for="radio34" class="iconfont"></label>国家公职人员-公务员 271 </span><br /> 272 <span class="radio"><input type="radio" id="radio35" name="radio7" /><label for="radio35" class="iconfont"></label>教育-医务-文体工作者 273 </span> 274 <span class="radio"><input type="radio" id="radio36" name="radio7" /><label for="radio36" class="iconfont"></label>部队人员 275 </span> 276 <span class="radio"><input type="radio" id="radio37" name="radio7" /><label for="radio37" class="iconfont"></label>工人 277 </span> 278 <span class="radio"><input type="radio" id="radio38" name="radio7" /><label for="radio38" class="iconfont"></label>农民 279 </span> 280 <span class="radio"><input type="radio" id="radio39" name="radio7" /><label for="radio39" class="iconfont"></label>自由职业者 281 </span> 282 <span class="radio"><input type="radio" id="radio40" name="radio7" /><label for="radio40" class="iconfont"></label>离退休人员 283 </span> 284 <span class="radio"><input type="radio" id="radio41" name="radio7" /><label for="radio41" class="iconfont"></label>在校学生 285 </span> 286 <span class="radio"><input type="radio" id="radio42" name="radio7" /><label for="radio42" class="iconfont"></label>其他 287 </span> 288 </p> 289 </li> 290 <li><p>4.请问您的学历是：</p> 291 <p class="padI_25"> 292 <span class="radio"><input type="radio" id="radio43" name="radio8" checked="checked" /><label for="radio43" class="iconfont"></label>硕士研究生及以上 293 </span> 294 <span class="radio"><input type="radio" id="radio44" name="radio8" /><label for="radio44" class="iconfont"></label>本科-专科 295 </span> 296 <span class="radio"><input type="radio" id="radio45" name="radio8" /><label for="radio45" class="iconfont"></label>中专-高中-职高 297 </span> 298 <span class="radio"><input type="radio" id="radio46" name="radio8" /><label for="radio46" class="iconfont"></label>初中 299 </span> 300 <span class="radio"><input type="radio" id="radio47" name="radio8" /><label for="radio47" class="iconfont"></label>小学及以下 301 </span> 302 </p> 303 </li> 304 <li><p>5.请问您家庭目前月均收入是：</p> 305 <p class="padI_25"> 306 <span class="radio"><input type="radio" id="radio48" name="radio9" checked="checked" /><label for="radio48" class="iconfont"></label>4000元以下 307 </span> 308 <span class="radio"><input type="radio" id="radio49" name="radio9" /><label for="radio49" class="iconfont"></label>4001~8000元 309 </span> 310 <span class="radio"><input type="radio" id="radio50" name="radio9" /><label for="radio50" class="iconfont"></label>8001~12000元 311 </span> 312 <span class="radio"><input type="radio" id="radio51" name="radio9" /><label for="radio51" class="iconfont"></label>12001~16000元 313 </span> 314 <span class="radio"><input type="radio" id="radio52" name="radio9" /><label for="radio52" class="iconfont"></label>16001~20000元 315 </span> 316 <span class="radio"><input type="radio" id="radio53" name="radio9" /><label for="radio53" class="iconfont"></label>20000元以上 317 </span> 318 </p> 319 <div class="subArea"> 320 <div class="use"> 321 <span id="lblMsg"><font color="Red"></font></span> 322 <h3>请填写以下信息完成调查</h3> 323 <ul class="input_area"> 324 <li> 325 <input type="text" name="sub_41" id="txtQuestionName" class="required" onfocus="if (value==defaultValue)value=''" onblur="if(!value)value=defaultValue" value="请填写您的真实姓名"> 326 </li> 327 </ul> 328 <ul class="input_area"> 329 <li> 330 <input type="text" name="sub_42" id="txtQuestionMobile" class="required" onfocus="if (value==defaultValue)value=''" onblur="if(!value)value=defaultValue" value="请填写您的手机号码"><br /><em>注：每位用户凭一个手机号只能参加一次调查、抽奖。<br />手机号作为抽奖唯一标识，必须真实有效，否则将视为抽奖无效。</em> 331 </li> 332 </ul> 333 <div id="msg" class="red"></div> 334 </div> 335 </div> 336 <p class="tjBtn"><input type="submit" name="" id="" value="提交调查" onclick="return toSubmit()" /></p> 337 </li> 338 339 </ul> 340 </div> 341 </form> 342 </div> 343 </div>