您的位置:CSS主页 > CSS模块 >

表单input file上传控件CSS美化样式特效

 

CSS实现文件上传表单上传控件input file样式美化

input file样式美化目录
  1. 表单input file样式说明
  2. CSS file美化后效果图
  3. 所有HTML+CSS代码
  4. 在线演示
  5. 打包下载

1、文件上传表单input file样式说明   -   TOP

本上传表单特效是使用纯DIV+CSS代码实现,兼容各大浏览器,使用方便在此美化基础上稍加CSS美化将获得更好的美化效果,也就是通过DIV CSS样式美化上传html input表单控件。

2、CSS file美化后效果图   -   TOP

file css样式美化特效图
美化后文件上传input表单file效果图

支持多浏览器与老旧版本浏览器,测试IE6-IE8 火狐、谷歌浏览器均兼容。

3、所有HTML+CSS代码:   -   TOP

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    > 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>input file上传表单案例</title> 
  6. <style type="text/css"> 
  7. <!-- 
  8. * { font-size:12px; } 
  9. body { margin:0; } 
  10. input { border:0; padding:0; margin:0; } 
  11. .div { margin:0 auto; width:100%; overflow:hidden; padding:20px 0; } 
  12. .line { position:relative; margin:0 auto; width:300px; text-align:left } 
  13. .line span.span { float:left; padding-top:2px; } 
  14. .file { position:absolute; left:0; width:250px; top:0; height:28px;
     filter:alpha(opacity=0); opacity:0; cursor: pointer } 
  15. .file1 { float:left; margin-left:8px; z-index:1; width:66px; height:28px;
     line-height:28px; background:url(liulan.gif) no-repeat 0 0; 
    text-indent:-9999px; cursor: pointer } 
  16. .inputstyle { border:1px solid #BEBEBE; width:170px; float:left; height:23px;
     line-height:23px; background:#FFF; z-index:99 } 
  17. --> 
  18. </style> 
  19. </head> 
  20. <body> 
  21. <div class="div"> 
  22.     <div class="line"> 
  23.         <span class="span"> 
  24.             <input name="" type="text" id="viewfile"
     onmouseout="document.getElementById('upload').style.display='none';" class="inputstyle" /> 
  25.         </span> 
  26.         <label for="unload" 
    onmouseover="document.getElementById('upload').style.display='block';" 
    class="file1">浏览...</label> 
  27.         <input type="file" 
    onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" 
    class="file" id="upload" /> 
  28.     </div> 
  29. </div> 
  30. </body> 
  31. </html> 

以上DIV+CSS控制美化的文件图片上传表单input file控件代码可直接拷贝使用。

4、在线演示:   -   TOP

http://www.thinkcss.com/yanshi/2012091901/

5、到百度网盘免费下载:   -   TOP

点击我去百度网盘下载

标签(Tag): input 上传表单美化 file

更多

上一页: 上一篇:纯DIV+CSS百分比进度条
下一页: 下一篇:没有了

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-09-19     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/m73.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息