字體圖標表單\單選框，複選框效果（完整版）
CSS：html
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：web
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>一、您是從哪一年開始理財或哪一年開始作股票投資的？</p> 11 <p class="padI_25 start">答：<input type="text" name="" id="" value="" /></p> 12 </li> 13 <li><p>二、您目前用於股市投資的資金規模是？（佔所有投資理財的比例？）</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>三、您目前在股市上的投資倉位情況是？</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>四、請問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>五、請問您在哪家券商開的戶？交易佣金費率是多少？</p> 62 <p class="padI_25 start">答：<input type="text" name="" id="" value="" /></p> 63 </li> 64 <li> 65 <p>六、請問您作了其餘投資理財或對其餘途徑感興趣嗎？（可多選）</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>七、在作投資決策前，請問您投資決策信息的主要來源是？（可多選）</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>八、您對目前投資理財機構爲您所作的投資顧問服務滿意嗎</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>九、您但願投資顧問可以爲您提供哪些服務？（可多選）</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>十、您但願投資顧問經過哪些方式爲您提供服務？（可多選）</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>
相關文章
- 1. 字體圖標單選框，複選框效果
- 2. CSS3結合fontawesome字體實現自定義單選框複選框效果
- 3. Axure表單元件：複選框與單選框
- 4. 自定義單選框和複選框
- 5. css自定義單選框、複選框
- 6. 複選框與單選框的判斷
- 7. JQuery單選框，複選框取值
- 8. 單選框，複選框樣式修改
- 9. Fluent Design單選按鈕，複選框，選擇框，Java菜單
- 10. 【Jquery】- 表單、表格、複選框
- 更多相關文章...
- • ionic 單選框 - ionic 教程
- • ionic 複選框 - ionic 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章