input文件域的美化

不得不说input file文件域真是丑的一*。。。&＃xff0c;与页面中的元素差异相差太大&＃xff0c;而且各个浏览器的显示效果还不一样&＃xff0c;真不想用这玩意&＃xff0c;真头疼。好吧&＃xff0c;说点正经的&＃xff0c;来聊一聊怎么美化input file文件域。

　　1.最开始的做法

　　我一开始的想法很暴力&＃xff0c;隐藏文件域&＃xff0c;设置一个按钮&＃xff0c;点击按钮用jquery的trigger方法模拟input file文件域的click事件。结果是FF11&＃xff0c;IE8&＃xff0c;IE7都可以触发click事件&＃xff0c;FF11可以触发input file的onchange&＃xff0c;IE8以及IE7无法触发onchange&＃xff0c;也就是input file的value为空&＃xff0c;webkit核心的chrome和safari根本连click都无法触发&＃xff0c;值得一提的是稍老版本的chrome倒是可以触发click。有兴趣的可以试试这个方法。

　　2.改进的方法

　　说起来这是做一个图片按钮获得的灵感。因为要提交表单&＃xff0c;又懒得用js&＃xff0c;所以就将submit按钮放到了有图片背景的容器里面。按钮控件还算好调教&＃xff0c;设为透明&＃xff0c;width、height都设为100%&＃xff0c;绝对定位blahblah&＃xff0c;好用极了&＃xff0c;也很有效。我就想文件域是不是也可以这么搞呢&＃xff0c;于是就写了个demo。

 上传
 

　　.button{

　　width:100px;

　　height:50px;

　　line-height:50px;

　　border:1px solid #cccccc;

　　background:#eeeeee;

　　border-radius:3px;

　　position:relative;

　　display:inline-block;

　　text-align:center;

　　overflow:hidden;

　　}

　　.file{

　　filter:alpha(opacity: 0);

　　opacity:0;

　　position:absolute;

　　left:0;

　　top:0;

　　width:100%;

　　height:100%;

　　display:block;

　　cursor:pointer;

　　}

　　在各个浏览器查看了效果&＃xff0c;ff根本就不鸟你的height100%&＃xff0c;其他浏览器均ok&＃xff0c;感觉很蛋疼。好吧&＃xff0c;那就给file加大字体好了&＃xff0c;只要字体高度大于按钮的高度就好了。你也可能发现了&＃xff0c;虽然设置了cursor&＃xff0c;但是各个浏览器的还是不能一致的显示小手&＃xff0c;设为不透明&＃xff0c;fontsize默认&＃xff0c;看了下各个浏览器下的效果&＃xff0c;如下图&＃xff1a;

　　好吧&＃xff0c;FF下只有文件域的按钮是小手图标&＃xff0c;chrome和safari正好相反&＃xff0c;ie倒是不错&＃xff0c;显示效果与预期一致。如果想要显示效果一致&＃xff0c;我想我们可以用一些hack的方法&＃xff0c;想到这里&＃xff0c;真的感觉想要在地上滚来滚去。。正如图上所示&＃xff0c;我们完全可以把不能显示小手图标的部分通过绝对定位隐藏掉。FF是文本框部分&＃xff0c;chrome及safari是button部分&＃xff0c;增加文件域的width及height我们就往左上角移动就好了。通过我蛋疼的测试&＃xff0c;ff根本就不鸟文件域的文本框部分height和width属性&＃xff0c;倒是可以正确的显示button的height&＃xff0c;所以只要把文本框从左侧遮住就好了。对于webkit核心&＃xff0c;从上方遮住按钮就好了。通过蛋疼的测试(font-size为14px)绝对定位如下&＃xff1a;

　　left:-155px;

　　top:-22px;

　　width:500%;

　　height:200%;

　　cursor:pointer;

　　font-size:14px;

　　此时为了照顾ff&＃xff0c;容器宽度就只能设置为固定的65px才能正好显示完全文件域的按钮部分。但是此时问题又来了&＃xff0c;ie8及ie7中文件域中的文本框部分必须双击才能打开选择文件窗口&＃xff0c;都蛋疼的走到这一步的了&＃xff0c;看来不再差一点更蛋疼的方法了—-firefox hack。哇哈哈&＃xff0c;ff也有这一天。。我们把上面的left设为0&＃xff0c;加入如下代码

　　&＃64;-moz-document url-prefix(){

　　 .file{

　　 left:-155px;

　　 }

　　}

　　这下就大功告成了&＃xff0c;蛋疼版的完美美化文本域&＃xff0c;好吧&＃xff0c;提供两个demo大家可以看下效果&＃xff0c;onchage也可以触发的。