改变上传文件样式

首先,给 <input type="file"> 元素戴个套子,这样比较安全嘛,是不是?看代码:

<span class="input-file">浏览...<input type="file"></span>

有了这个安全的外层容器,我们就可以开搞了。问题的核心有两点:第一,把丑陋的原生上传控件给藏起来;第二,支持点击上传功能。

关键的代码片段:

.input-file {
overflow:hidden;
position:relative;
}
.input-file input{
opacity:0;
filter:alpha(opacity=0);
font-size:100px;
position:absolute;
top:0;
right:0;
}

其中,字体大小 100px 的原因在于放大上传控件右侧的按钮区域,结合靠右定位,能够保证鼠标 cursor 为 default 状态。

另外,如果要支持鼠标悬停效果,也是可以的,把 span 标签改成 a 标签,然后加上 hover 伪类就可以了。

<a href="javascript:void(0);">浏览...<input type="file"></a>

貌似是全兼容的?反正 IE 是可以的。自己看吧,懒得看兼容了。

更多相关文章
  • 0x00 前言 众所周知,最近谷歌被封堵的很厉害,什么Gmail啊.谷歌地图啊全都无法使用.当然对我们在校的学生来说,这些用不了我也就忍了,但是谷歌学术用不了你让我怎么搞科(chao)研(xi),I cannot endure!  好在办法总是有的,代理.VPN.GoAgent(最近好像也用不了了) ...
  • Day06 1.二维数组定义格式? (1)元素是一维数组的数组. (2)格式:      A:数据类型[][] 数组名 = new 数据类型[m][n];      B:数据类型[][] 数组名 = new 数据类型[m][];      C:数据类型[][] 数组名 = new 数据类型[][]{ ...
  • #include #include #define MaxSize 100 /*线索二叉树类型定义*/ typedef char DataType; typedef enum {Link,Thread}PointerTag;//Link=0表示指向孩子节点,Thread=1表示指向前驱节点或后继节点 ...
  •   首先恭喜大家挺过了测试二!为什么说“挺”呢?因为测试二的难度和测试一相比有一个比较大的跳跃:首先测试一仅仅利用现有硬件模块稍加改造而DIY一个蓝牙防丢器,而测试二则要求大家具有从脑袋里的一个想法到一个全新的小设备的实现的全部能力,显然该过程不是连几根线那么简单:其次测试一对蓝牙的使用仅限于信号搜 ...
  • 不管你有多好的商业点子也只能算是纸上谈兵,你需要的是将这些好的想法变为现实的资金,因此成功获得风投公司的亲睐对企业的发展至关重要.那么,究竟要怎样才能让自己的企业被风投公司选中呢?下面就是消费者信用与理财服务网站Gredit Karma 创始人Kenneth Lin为你支的招,Gredit Karm ...
  • 第2章.观察者模式 1.定义: 在对象之间定义一对多关系,当一个对象改变状态时,该对象的依赖会收到通知,并自动更新. 2.介绍 在介绍观察者模式之前,先来说一个日常生活中经常碰到的事(可能现在的人碰到的少了,但是老一辈人喷到的要多的多),那就是关于报纸的订阅.在报纸订阅这整个事件中牵扯到了报社.订阅 ...
一周排行
  • 易网科技讯 8月7日讯 今日,特斯拉回应外界对于6个显著缺陷被入侵,称关键的车辆操作功能无法侵入.特斯拉表示,Lookout研究团队花费了很多时间研究Model S可入侵的漏洞,并且是在Model S真车上进行的漏洞 ...
  • 原文:http://dxer.github.io/2013/07/09/centos-passwd.html
  • - android培训.java培训.期待与您交流! -   跟大家推荐我自学期间收集的各种绝好视频: 风靡腾讯网络的Java+3G开发全套视频教程 屌丝们,最爱的.NET全套视频项目教程 史上一直被模仿10多年的P ...
  • 前天exploit-db上出现了3个Local Exploit,都是来自朝鲜的RedStar 3.0的vul.网上也下到了镜像,按网上的方法测试了下,真的是 ————————————————————————————— ...
  • NRPE的安装配置 NRPE是nagios的一个扩展,它被用于被监控的服务器上,向nagios监控平台提供该服务器的一些本地的情况.例如,cpu负载.内存使用.硬盘使用等等.NRPE可以称为nagios的for li ...
  • 你在Unix下开发过软件吗?写完一个程序,编译运行完全正常,在你本机上工作得好好的,你放到源代码管理系统中.然后,告诉你的同事说,你可以取下来用了.这时,你长长的出了一口气,几天的工作没有白费,多么清新的空气啊,你开 ...
  • 徐是华为数据中心的头,技术超级牛人,一级部门总监,华为副总裁,年收入过千万,数据中心是用 火山岩建的深入地下的一个大型建筑.防辐射,可防卫星的电子,雷达等手段的侦察.里面有象卫星发射 中心那种超大屏幕,机房里满是三米 ...
  •                                                                                 软件工程项目组会议记录 [例会时间]2013年5月3日1 ...
  • 美女.才女和淑女,你娶谁? 恋爱是婚姻的前奏.照理说,恋爱对象和结婚对象是同一人,但实际情况往往并非如此.男人的求爱对象和求婚对象往往是不同的两个人.鉴于恋爱的主要活动是风花雪月.谈情说爱,婚姻的主要活动是柴米油盐. ...
  • S先生.P先生.Q先生他们知道桌子的抽屉里有16张扑克牌: 红桃A.Q.4 黑桃J.8.4.2.7.3 草花K.Q.5.4.6 方块A.5 约翰教授从这16张牌中挑出一张牌来,并把这张牌的点数告诉 P先生,把这张牌的 ...