• ie浏览器下HTML上传控件input=file的美化


      近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看。今天在网上找到一方法,试过后感觉很好,终于把这个问题给解决了,现将其记录一下。

      美化的原理:将input到一个div框里,opacity设置为0,这样input表现为全透明,不可见,但覆盖在文字之上,div里的内容就可以显示出来,这时你给div添加你所要的背景图片就可以了,单击div,依然会触发上传事件。

    HTML代码:

    1 <div class="btn_scan" onmouseout="this.className='btn_scan'" onmouseover="this.className='btn_scan btn_scan_h'"><input type="file" class="btn_file" value="浏览" />
    2 </div>

    CSS代码:

    1 .btn_scan{width:68px;height:23px;line-height:23px;display:inline-block;*display:inline;zoom:1;margin:0;*margin-right:6px;background:url(../images/btn2.png) no-repeat;background-position:0% 0%;border:0;}
    2 .btn_scan_h{background:url(../images/btn2.png) no-repeat;background-position:100% 100%;}
    3 .title .btn_file,.title8 .btn_file{width:68px;height:23px;border:0;opacity:0;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
  • 相关阅读:
    WPF中ListBoxItem绑定一个UserControl的学习
    Server.Transfer和Response.Redirect的区别
    4个程序员的一天
    (转)让ADO.NET Entity Framework支持Oracle数据库
    IIS操作类
    HttpHandler与HttpModule区别
    网站性能优化的34条黄金法则
    oracle9i/10g/11g各种下载
    WCF简要介绍
    软件系统的稳定性
  • 原文地址:https://www.cnblogs.com/0808bing/p/3275551.html
Copyright © 2020-2023  润新知