码迷,mamicode.com
首页 > 其他好文 > 详细

字体图标表单\单选框,复选框效果(完整版)

时间:2014-12-18 20:17:45      阅读:376      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   ar   io   color   os   sp   for   

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>

 

字体图标表单\单选框,复选框效果(完整版)

标签:android   style   blog   ar   io   color   os   sp   for   

原文地址:http://www.cnblogs.com/q460021417/p/4172368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!