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

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

HTML代码:

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

CSS代码:

 .btn_scan{width:68px;height:23px;line-height:23px;display:inline-block;*display:inline;zoom:;margin:;*margin-right:6px;background:url(../images/btn2.png) no-repeat;background-position:0% 0%;border:;}
.btn_scan_h{background:url(../images/btn2.png) no-repeat;background-position:100% 100%;}
.title .btn_file,.title8 .btn_file{width:68px;height:23px;border:;opacity:;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}

ie浏览器下HTML上传控件input=file的美化的更多相关文章

  1. 选择本地文件上传控件 input标签

    当要通过控件来选择本地文件上传的时候的一种方式 <input type="file" id="input-file"/> 注意 type类型一定要是 ...

  2. FireFox下上传控件的显示问题

    Chrome正常 FireFox显示不正常 上传控件一直有个问题,就是样式问题,解决方法就是用一个大的背景层挡住,然后点大的背景层去触发上传控件的Click事件. Html: <span id= ...

  3. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  4. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

  5. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  6. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  7. Extjs3 + swfUpload实现多文件上传控件

    要在ExrtJS框架实现选择多文件上传,FileUploadField已经无法满足需求,所以采用了 swfUpload上传控件,上传窗口如下: 多选文件进行上传(其实是每个文件异步上传),可以中途停止 ...

  8. ***文件上传控件bootstrap-fileinput的使用和参数配置说明

    特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...

  9. jquery文件上传控件 Uploadify 可以和ajax交互

    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

随机推荐

  1. cf591A Wizards' Duel

    A. Wizards' Duel time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  2. git bash中避免在push时反复输入用户名和密码

    我用的是windows系统,这几天学着使用git时发现每次使用git push时每次都要输入一遍用户名和密码,感觉特烦,特意上网查了下,找到了简化方法.虽然不是原创,但至少算是加了点自己的心得和经验吧 ...

  3. 建议别买三星Gear:半电脑产品 设计糟糕

    不久之前,三星刚刚发布了智能腕表Galaxy Gear,据<纽约时报>周三报道,尽管三星电子的智能手表Galax Gear集各种酷炫新功能于一身,但对消费者来说,却是个差劲的选择. < ...

  4. otl获得sql出错位置(oracle)

    项目的一个需要,要获得sql出错的位置,从而给出类似sqlplus的错误提示(如下) sql出错原因易获得,记录在otl_exception::msg,但出错位置就不是那么容易了. 默认情况下otl异 ...

  5. JS 实现显示和隐藏div(以百度地图为例)

    主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html ...

  6. Robotium -- AndroidUI优化工具HierarchyViewer

    为什么使用HierarchyViewer 不合理的布局会使我们的应用程序UI性能变慢,HierarchyViewer能够可视化的角度直观地获得UI布局设计结构和各种属性的信息,帮助我们优化布局设计.H ...

  7. android 接听和挂断实现方式

    参考:android 来电接听和挂断 支持目前所有版本 注意:android2.3版本及以上不支持下面的自动接听方法. (会抛异常:java.lang.SecurityException: Neith ...

  8. Android(java)学习笔记250:ContentProvider使用之获得系统联系人信息02(掌握)

    1.重要: 系统删除一个联系人,默认情况下并不是把这个联系人直接删除掉了,只是做了一个标记,标记为被删除. 2.前面一讲说过了如何获取系统联系人信息(通过ContentProvider),获取联系人信 ...

  9. LSI MegaCli 命令使用4

    Dell服务器常用管理命令总结准备新版本的 MegaCli-1.01.24-0.i386.rpm 会把程序安装在/opt下,可以自定义安装目录,例如:rpm --relocate /opt/=/usr ...

  10. wildcard

    [rusky@rhel7 test]$ lstest1  test123  test2  test317  test33  test335  test336  test44  testtest[rus ...