改变上传文件样式

首先,给 <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.介绍 在介绍观察者模式之前,先来说一个日常生活中经常碰到的事(可能现在的人碰到的少了,但是老一辈人喷到的要多的多),那就是关于报纸的订阅.在报纸订阅这整个事件中牵扯到了报社.订阅 ...
一周排行
  • import urllib2 class UseProxy(object): def __init__(self): self.user = 'aaaa' self.password = 'bbbb' self.pr ...
  • 1.如果你做了一个简单的注册界面,需要用户进行注册,但有些项是不必要填的,当用户完成注册时,数据库表中的相应字段的值会写入null,但如何将查询的字段的值null显示出来? 2.首先我们学习一下如何向数据库的相应字段 ...
  •    昨天晚上去了中山大学听了新浪的宣讲会,自己也投了简历,觉得即使是在宣讲会也需要自己注意很多,他们每个人都准备了好几份简历,而我自己就带了一份过来,觉得好郁闷啊,而且这一份上还是写写画画,我投的是java系统开发 ...
  • // on "init" you need to initialize your instance bool HelloWorld::init() { ////////////////////// ...
  • 9月23日消息,工信部8月份下半月共核发了72款3G手机,其中支持WCDMA的小米手机MI-ONE以及Nokia N9在列.值得一提的是,苹果的WCDMA无线数据终端即苹果3G版iPad2也在进网许可行列.工信部文件 ...
  • 易网科技讯 5月25日消息,今天,水果生鲜电商天天果园宣布完成总金额7万美元的C轮融资,由京东领投,海纳亚洲创投基金(SIG).锴明(Clearvue)投资等机构跟投.据悉,该笔资金将用于天天果园的基础建设投入.团队 ...
  • [编辑] 公钥和私钥的产生 假设Alice想要通过一个不可靠的媒体接收Bob的一条私人訊息.她可以用以下的方式来产生一个公钥和一个私钥: 随意选择两个大的质数p和q,p不等于q,计算N=pq. 根据歐拉函數,不大于N ...
  • declare @year int --set @year =2014 set @year=year(GETDATE());--获取系统当前日期再取出其中的年份 if @year%4=0 and @year%100& ...
  • 主 题: windows 2008 DHCP服务器的基本配置 1.DHCP 概念:动态主机配置协议 功能:给网络中的客户机自动分配TCP/IP选项参数 2.DHCP 租约的生成过程 用户发出请求--DHCP服务器提供 ...