zoukankan      html  css  js  c++  java
  • input file上传表单美化file按钮美化篇

    一、表单input file样式说明   -   TOP

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

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

    file美化效果图
    file表单美化效果图

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

    三、所有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; 100%; overflow:hidden; padding:20px 0; } 
    12. .line { position:relative; margin:0 auto; 300px; text-align:left } 
    13. .line span.span { float:left; padding-top:2px; } 
    14. .file { position:absolute; left:0; 250px; top:0;
       height:28px; filter:alpha(opacity=0); opacity:0; cursor: pointer } 
    15. .file1 { float:left; margin-left:8px; z-index:1; 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; 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> 

    四、input file使用说明   -   TOP

    这里对file上传表单美化使用图片,如果需要不同美化效果,可根据以上CSS和对应HTML代码进行简单修改即可达到自己想要css美化input file按钮效果。可以修改按钮图片和CSS进行灵活应用。

    在线样式:http://www.divcss5.com/yanshi/2013020801/

    五、源代码打包下载   -   TOP

  • 相关阅读:
    git安装
    git
    运维项目维护个人总结经验
    redis基本命令
    mysql基础常用命令
    进入Linux单用户模式
    Nginx查看并发链接数
    linux编写脚本检测本机链接指定IP段是否畅通
    集体干死java 在启动.sh
    系统优化小脚本
  • 原文地址:https://www.cnblogs.com/tudouya2013/p/3737365.html
Copyright © 2011-2022 走看看