改变上传文件样式

首先,给 <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.介绍 在介绍观察者模式之前,先来说一个日常生活中经常碰到的事(可能现在的人碰到的少了,但是老一辈人喷到的要多的多),那就是关于报纸的订阅.在报纸订阅这整个事件中牵扯到了报社.订阅 ...
一周排行