改变上传文件样式

首先,给 <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.介绍 在介绍观察者模式之前,先来说一个日常生活中经常碰到的事(可能现在的人碰到的少了,但是老一辈人喷到的要多的多),那就是关于报纸的订阅.在报纸订阅这整个事件中牵扯到了报社.订阅 ...
一周排行
  •   了解了窗体的显示相关知识,接着总结一下窗体的传值方法: 1.通过构造函数  特点:传值是单向的(不可以互相传值),实现简单 实现代码如下: 在窗体Form2中        int value1; string  ...
  • 许多复杂的软件系统运行在多个处理器或分布式计算机上.将软件分布在多台计算机上的原因有多种,例如: 分布式系统可以利用多个 CPU 或一群低成本计算机的计算能力. 某个软件可能仅在特定计算机上可用. 出于安全考虑,软件 ...
  • 据悉,Month of Twitter Bugs计划是2006年7月发起的"Month of Browser Bugs(浏览器漏洞月)"活动的衍生,当年参与了2006年活动的安全研究人员Aviv ...
  • 刚刚翻书发现这个问题,在网上找了一下,我的理解吧. 他俩的区别就是“&”和“”不执行短路计算,而&&和执行了短路计算.   &不执行短路计算 ——————表达式A&表达式B   ...
  • 在之前只知道SqlServer支持数据批量插入,殊不知道Oracle.SQLite和MySql也是支持的,不过Oracle需要使用Orace.DataAccess驱动,今天就贴出几种数据库的批量插入解决方法. 首先说 ...
  • 诺基亚日前在其位于北京亦庄的总部举办体验会,向媒体介绍了诺基亚E7卓越的性能,尤其对全球首次应用在手机中的微软统一通信解决方案进行全面的诠释. 微软与诺基亚于2009年结成全球战略合作伙伴关系,在全球范围内共同致力于 ...
  • px   :是屏幕的像素点 in    :英寸 mm :毫米 pt    :磅,1/72 英寸 dp   :一个基于density的抽象单位,如果一个160dpi的屏幕,1dp=1px dip  :等同于dp sp ...
  • 排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta charset= ...
  • 1.TCP/IP层次模型 当然这里我们只讨论重要的四层 01,应用层(Application):应用层是个很广泛的概念,有一些基本相同的系统级TCP/IP应用以及应用协议,也有许多的企业应用和互联网应用.http协议 ...
  • 朋友做了一个工控机的板子,我要了一块来,自己加上了迅驰1.2G CPU,再从笔记本上拆了一个1G内存和老的移动硬盘 30G IDE,就算搭起了一个最简陋的服务器.此外我从破DVD光驱上拆了一块铁皮底板,打了几个洞,把 ...