文档章节

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

李玉珏
 李玉珏
发布于 2015/03/26 10:12
字数 597
阅读 9977
收藏 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水平的时候到了。

© 著作权归作者所有

共有 人打赏支持
李玉珏

李玉珏

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

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

ouloba
2016/08/07
244
0
VC6.0打开或者添加工程文件崩溃的解决方法

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

lwaif
2015/06/19
0
0
android常用组件之DatePicker和TimePicker

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

sometimesno1
2014/12/20
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

没有更多内容

加载失败,请刷新页面

加载更多

sed命令

10月17日任务 9.4/9.5 sed 1.sed(上)(下) 1.sed 匹配功能 #sed -n ‘/root/’ p test.txt 将带有root的内容打印出来 同时支持 . * 还有 + 不过需要脱译,或者在前面选项加r。 支持{ } 支...

hhpuppy
31分钟前
0
0
day120-20181018-英语流利阅读-待学习

千禧一代注意了:一大波公司正向你的钱包袭来 Daniel 2018-10-18 1.今日导读 这几年,你有没有发现,不管是在微信公众号还是在抖音,有越来越多的商家和品牌开始玩起了网络用语和表情包,从卖...

飞鱼说编程
40分钟前
0
0
IOasd

能够使用FileUtils常用方法操作文件 字符流体系介绍 : 在 IO 开发中, 我们传输最频繁的数据为字符, 而以字节的方式来传输字符数据会使程序员丧失对数据内容的判断.因为程序员只认识字符, 不认...

码农屌丝
今天
0
0
创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
今天
3
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部