文档章节

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

李玉珏
 李玉珏
发布于 2015/03/26 10:12
字数 597
阅读 9704
收藏 6
点赞 0
评论 0

        网页设计中,对于文件选择框(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水平的时候到了。

© 著作权归作者所有

共有 人打赏支持
李玉珏

李玉珏

粉丝 268
博文 57
码字总数 92115
作品 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
如何制作ROM?ROM解包、修改、封包的流程步骤又如何?

传统的ROM制作都要对system.img进行手动解压,修改,封包,现在教你一键操作,完成ROM制作全部流程。 下载并安装【rom定制大师】,下载地址:http://pan.baidu.com/s/1kVRcYUF 2. 点击rom定制...

romhelper
2016/04/28
71
0
使用UltraISO制作ubuntu安装u盘启动盘图文教程

制作U盘启动1.gif 1、首先打开UltraISO软件,尽量下载最新版的 http://www.cr173.com/soft/15480.html 2、点击工具栏中的第二个打开镜像文件工具,如图红色方框标志按钮,然后在打开的“打开...

胖先森
2017/09/07
0
0
推荐个WOLFMAP地图下载器,彻底解决不能访问谷歌问题

WolfMap地图下载器,是一款轻量级的地图下载的工具。它支持地图在线预览、全屏浏览、地名搜索、坐标定位、矩形下载、长度测量、面积测量。度分秒转换、经纬度级别显示等功能。 谷歌地球高清影...

umi-1
2016/05/19
609
1
安装包制作工具 SetupFactory使用1 详解

Setup Factory 是一个强大的安装程序制作工具。提供了安装制作向导界面,即使你对安装制作不了解,也可以生成专业性质的安装程序。可建立快捷方式,也可直接在 Windows 系统的注册表加入内容...

科技小毛
2017/08/09
0
0
Myeclipse的使用方法-导入、导出Java 项目

1.导入项目 当下载了包含Eclipse 项目的源代码文件后,我们可以把它导入到当前的Eclipse 工作区然后编辑和查看。点击菜单File > Import,然后在弹出的Import 对话框中展开General目录,选择E...

婷瑄
2015/03/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

回想过往,分析当下,着眼未来

好久没有真正的在纸质笔记本上写过东西了,感觉都快不会写字了,笔画都不知道怎么写了。接下来就说说咱们的正事。 2018年7月22日,我做了一个决定,那就是去参加安全培训(可能是我职业生涯中...

yeahlife
43分钟前
4
0
关于工作中的人际交往

关于工作中的人际交往 Intro 写了篇发泄情绪的博客,但不会发布出来。 大概就是,要么忍,要么滚。 以及一些不那么符合社会主义核心价值观,不满于大资本家与小资本家剥削的废话。

uniqptr
48分钟前
0
0
springMVC的流程

1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3.处理器映射器根据请求url找到具体的处理器,生成处理器对象及处理器拦截器(...

JavaSon712
今天
0
0
大数据教程(3.2):Linux系统软件安装之自动化脚本

博主前面文章有介绍过软件的安装,可以帮助IT人员顺利的完成功能软件安装;但是,对于我们运维人员或者需要管理软件安装的项目经理来说,有些应用一次行需要搭建很多台相同的软件环境(如tom...

em_aaron
今天
0
1
Spring Boot 2.0.3 JDBC整合Oracle 12

整合步骤 1. Oracle驱动引入 Oracle驱动一般不能通过maven仓库直接下载得到,需自行下载并导入到项目的lib目录下,建议通过如下pom依赖引入下载的Oracle驱动 <!-- Oracle 驱动 -->...

OSC_fly
今天
0
0
java 8 并行流 - 1

下面创建一个并行流,与顺序流 //顺序流Stream.iterate(0L, i -> i + 1) .limit(Integer.MAX_VALUE) .reduce(0L, Long::sum);//并行流Stream.iterate(0L, i -> i......

Canaan_
今天
0
0
数据结构与算法5

二分法采用向下取整的方法 使用有序数组的好处是查找的速度比无序数组快的多,不好的方面是因为要将所有靠后的数据移开,所以速度较慢,有序数组和无序数组的删除操作都很慢。 有序数组在查找...

沉迷于编程的小菜菜
昨天
1
1
SpringBoot | 第十一章:Redis的集成和简单使用

前言 上几节讲了利用Mybatis-Plus这个第三方的ORM框架进行数据库访问,在实际工作中,在存储一些非结构化或者缓存一些临时数据及热点数据时,一般上都会用上mongodb和redis进行这方面的需求。...

oKong
昨天
5
0
对基于深度神经网络的Auto Encoder用于异常检测的一些思考

一、前言 现实中,大部分数据都是无标签的,人和动物多数情况下都是通过无监督学习获取概念,故而无监督学习拥有广阔的业务场景。举几个场景:网络流量是正常流量还是攻击流量、视频中的人的...

冷血狂魔
昨天
0
0
并发设计之A系统调用B系统

A-->B A在发送请求之前,用乐观锁,减少对B的重复调用,这样一定程度上是幂等性。 比如A系统支付功能,要调用B系统进行支付操作,但是前端对"支付"按钮不进行控制,即用户会不断多次点击支付...

汉斯-冯-拉特
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部