文档章节

HTML+CSS点击按钮弹出文件选择框的最佳方案

李玉珏
 李玉珏
发布于 2015/03/26 10:12
字数 597
阅读 10137
收藏 6

        网页设计中,对于文件选择框(HTML的file标签),出于美观或者体验等等的原因,我们对他的默认外观并不满意,我们可能希望点击一个按钮直接弹出文件选择框,这个很多人认为很简单,但是由于浏览器兼容的原因,主要是在IE8中,不允许调用隐藏file标签的click方法,这个并不容易实现。

        很多人会考虑使用flash控件或者ActiveX控件,这个方法功能上没问题,但是对客户机的环境有依赖,并不完美。

        经过仔细研究和试验,找到了一个看上去比较完美的设计方案,基本上不存在浏览器兼容问题。基本设计思路就是,用一个定宽定高、不能滚动、透明的DIV,包裹一个非常大的file标签,file标签的font-size具体数值可以灵活设定,主要是保证DIV的可见范围内的下面,完全是file标签的浏览按钮即可,剩下的外观就是开发者自由发挥了,最后只要保证定宽定高的DIV和用户可见的点击区域的外观完全吻合即可。

    下面上样例代码:

<li style='display: inline'>
    <a href="#"><i>上传资料</i>
        <div style="filter:alpha(opacity=0);cursor: pointer; opacity: 0; position: absolute;  width: 75px;margin: -18px 0 0 -6px ;margin: -16px 0 0 -6px\9;height:20px\9;overflow: hidden; ">
            <input type="file" onchange="uploadFile()" name="upload" style="font-size: 200px;cursor: pointer;direction: rtl !important; float: right\9; "/>
        </div>
    </a>
</li>

    如果将上述代码片断直接拷贝运行,可能有问题,因为已经把我们的实际样式去掉了,只剩下了精华,理解了设计思路的开发者,考验你CSS水平的时候到了。

© 著作权归作者所有

共有 人打赏支持
李玉珏

李玉珏

粉丝 318
博文 66
码字总数 110992
作品 0
沈阳
技术主管
私信 提问
lae界面开发工具入门之介绍十四--《介绍lae在windows平台上如何打包编译》

视频讲解:http://www.tudou.com/programs/view/pKDsOX5BNF8/ 大家好! 现在我来介绍lae在windows平台上如何编译打包发布 编译是指用户将自己的代码与lae的链接库整合,产生应用程序的过程;打...

ouloba
2016/08/07
244
0
android常用组件之DatePicker和TimePicker

在android中,DatePicker组件和TimePicker组件分别是日期选择器和时间选择器。 该实例中,当点击日期选择器按钮后,弹出日期选择框,用户选择日期后andoid会将日期显示到TextView组件中;当点...

sometimesno1
2014/12/20
0
0
VC6.0打开或者添加工程文件崩溃的解决方法

很多学习编程的同学都遇到这样的问题,在Windows操作系统下使用Visual C++ 6.0编程时,如果点击菜单中的【打开】或者【添加】,或者按快捷键,都会弹出下图的对话框,出现程序崩溃并退出的情...

lwaif
2015/06/19
0
0
PYQT4 + Python2.7 + eric4-4.2.2a的安装全过程

第一步:下载Python2.7最新版本,(不推荐下载3.0版本,新版本还在测试中) http://www.python.org/ftp/python/2.7/python-2.7.msi 下载PyQt-Py2.7-x86-gpl-4.9.5-1.exe http://www.riverba...

durban
2012/10/06
0
0
Dreamweaver简明手册——常用功能介绍

1.概述 Dreamweaver 是一款集网页制作和管理网站于一身的所见即所得网页编辑器,在开发前端视图页面的时候,用这个工具,能让代码更清晰化,界面更整洁,可以大大的提升Web前端开发效率。 基...

数通畅联
2015/04/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

GlusterFS的再次节点重置和恢复

采用Ubuntu+ZFS+GlusterFS的存储集群,其中一个节点再次出现故障,gluster volume status显示为N/A状态。 检查网络,发现原来的IP地址 10.1.1.193发生了改变(估计被DHCP重新分派地址了),导...

openthings
25分钟前
5
0
BOM与正则表达式

BOM BOM的全称叫做Browser OjbectModel 浏览器对象模型,它定义了操作浏览器的接口。 BOM对象包括:Window、History、Navigator、Screen和Location。但是由于浏览器厂商的不同,BOM对象的兼容...

Panda-Q
25分钟前
1
0
牵头函数

箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或new.target。这些函数表达式更适用于那些本 来需要匿名函数的地方,并且它们不能用作构造函数。 首先:我们先...

wshining
30分钟前
1
0
mysql把一个数据库中的数据复制到另一个数据库中的表 2个表结构相同

首页 问题 全部问题 经济金融 企业管理 法律法规 社会民生 科学教育 健康生活 体育运动 文化艺术 电子数码 电脑网络 娱乐休闲 行政地区 心理分析 医疗卫生 精选 知道专栏 知道日报 知道大数据...

linjin200
31分钟前
1
0
python redis操作

redis命令:http://blog.csdn.net/yhl27/article/details/9936189 python redis: 干货 http://www.cnblogs.com/wangtp/p/5636872.html http://doc.redisfans.com/ http://developer.51cto.......

stys35
32分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部