ie浏览器下HTML上传控件input=file的美化
近期写东西用到了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的美化的更多相关文章
- 选择本地文件上传控件 input标签
当要通过控件来选择本地文件上传的时候的一种方式 <input type="file" id="input-file"/> 注意 type类型一定要是 ...
- FireFox下上传控件的显示问题
Chrome正常 FireFox显示不正常 上传控件一直有个问题,就是样式问题,解决方法就是用一个大的背景层挡住,然后点大的背景层去触发上传控件的Click事件. Html: <span id= ...
- 百度 flash html5自切换 多文件异步上传控件webuploader基本用法
双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
- Extjs3 + swfUpload实现多文件上传控件
要在ExrtJS框架实现选择多文件上传,FileUploadField已经无法满足需求,所以采用了 swfUpload上传控件,上传窗口如下: 多选文件进行上传(其实是每个文件异步上传),可以中途停止 ...
- ***文件上传控件bootstrap-fileinput的使用和参数配置说明
特别注意: 引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...
- jquery文件上传控件 Uploadify 可以和ajax交互
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
随机推荐
- 反编译工具 使用.NET JustDecompile来反编译你的程序代码
原文地址:http://www.it165.net/pro/html/201310/7383.html 前言 在项目的进行中有时会碰到需要去了解由第三方所开发的程序代码或者因为年久已经遗失原始码的程序 ...
- bzoj2208 [Jsoi2010]连通数(scc+bitset)
2208: [Jsoi2010]连通数 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 1879 Solved: 778[Submit][Status ...
- 定时执行程序-Quartz简单实例
1.加jar包:Quartz自己quartz-1.8.3.jar和依赖包commons-logging.jar .slf4j-log4j12-1.5.10.jar .slf4j-api-1.5.10 ...
- @Resource 和 @Autowired注解的异同
@Resource 和 @Autowired注解的异同 @Autowired 默认按类型装配,默认情况下必须要求依赖对象必须存在,如果要允许null值,可以设置它的required属性为false 例 ...
- cocos2d-x精灵移动的方法
1.飞机发射子弹型 想要实现子弹的的飞行效果,又不想在每帧Update里计算位置,最好的方法调用CCMoveTo 例在发射子弹的时机,能够ccTouchBegan时: CCMoveTo* move = ...
- Android开发/源代码资源汇总
全网最全的Android游戏源代码汇总 mod=viewthread&tid=5080&fromuid=5" target="_blank">htt ...
- linux开机自动启动脚本
前言linux有自己一套完整的启动 体系,抓住了linux启动 的脉络,linux的启动 过程将不再神秘.阅读之前建议先看一下附图.本文中假设inittab中设置的init tree为:/etc/ ...
- IIS部署FTP服务器步骤
本文介绍如何在IIS中部署FTP服务端.首先确认windows开启了ftp功能:确认方法:进入控制面板->程序->打开或关闭windows功能如下图所示: 确认FTP勾选 确认后打开IIS ...
- 大数据笔记07:大数据之Hadoop的HDFS(特点)
1. HDFS的特点: (1)数据冗余,硬件容错 (2)流式的数据访问(写一次读多次,不能直接修改已写入的数据,只能删除之后再去写入) (3)存储大文件 2. HDFS适用性和局限性 适用性:(1)适 ...
- IO-文件 File 复制 读写 总结
一定要注意: 传入的参数,应该是包含文件名的完整路径名,不能把一个文件复制到[文件夹]中,因为[文件夹]本身是不能有输入输出流的,只能复制到一个[文件]中,否则会报异常. 以字节流读写的三种方式 pu ...