改变上传文件样式

首先,给 <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.介绍 在介绍观察者模式之前,先来说一个日常生活中经常碰到的事(可能现在的人碰到的少了,但是老一辈人喷到的要多的多),那就是关于报纸的订阅.在报纸订阅这整个事件中牵扯到了报社.订阅 ...
一周排行
  • 登陆信息调取 Yii::app()->user->name,调取登陆的session信息 登录时 调用了 $LoginForm->login() 这个方法上面就能够取到登录的用户名   前后台ses ...
  • sqlserver2008附加数据库附加不上解决   附加数据库时,提示如下错误:  www.2cto.com   点击“确定”之后弹出如下错误: 点击链接之后,才出现真正的如下图错误提示: 在网上查了查资料,确实按 ...
  • C++为我们提供了安全的内存空间申请方式与释放方式,但是new与delete表达式却是把空间的分配回收与对象的构建销毁紧紧的关联在一起.实际上,作为与C语言兼容的语言,C++也为我们提供了更加底层的内存操作方式的. ...
  • 68. Which statement is true regarding the default behavior of the ORDER BY clause? A. In a character sort,   ...
  • 网上流传着很多搭讪校园女神的技巧,有表演英雄救美的,有打着“师兄”.“老乡”旗号送关怀的,还有厚着脸皮搭讪的.其实,这些方法都OUT了.最近记者在“库带”漏洞平台上看到,一个名为“中国校花大赛”的网站存在多个高危漏洞 ...
  • 视频的显示和存放原理 对于一个电影,帧是这样来显示的:I B B P.现在我们需要在显示B帧之前知道P帧中的信息.因此,帧可能会按照这样的方式来存储:IPBB.这就是为什么我们会有一个解码时间戳和一个显示时间戳的原因 ...
  • Description For a given positive integer n, please find the smallest positive integer x that we can find an ...
  • 当你的页面有大量数据时,建议使用set_time_limit()来控制运行时间,默认是30s,所以需要你将执行时间加长点,如 set_time_limit(300)  ,其中将秒数设为0 ,表示持续运行! 如:set ...
  • 易网科技讯 8月15日消息,中国电信应用商店运营中心总经理赵锦鹏在互联网大会上表示,天翼空间在未来会定位于就是2C+2B,线上加线下,为客户提供从应用开发到分销服务,分销运营,下载一揽子服务,成为移动应用服务提供商, ...
  • 问题1  protoc (compile-protoc) on project hadoop-common: org.apache.maven.plugin.MojoExecutionException: 'prot ...