今天一同事问我文件上传按钮的问题，情况是这样的，他页面上有3个按钮，分为左中右三个，左边的位按钮甲，右边的位按钮乙，而中间的就是个文件选择按钮，情况大概是这个样子的：
两边的按钮都有了样式，但中间的选择文件的样式死活调不出来，于是我就同他一块解决，后来经过自己设置width,height折腾无果，再求助google终于找到了解决办法，这个方法是这样的：
用一个标签套着文件域，然后调整文件域外边的元素，设置成按钮样式，然后，在把文件域“隐藏”掉（这里的隐藏只是把透明度改为0，这样元素还是存在的），这样，当点击“按钮”时就会触发文件域，就可以选择文件了，下面看下代码吧：
html部分：
1
2
3
<aclass="btn-file">
<inputtype="file">
</a>
CSS部分（代码片段）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.btn-file {
position:relative;
display: inline-block;
width:156px;
height:43px;
background:#e4e4e4url(bg-btn.jpg)no-repeatcentercenter;
text-align:center;
line-height:68px;
overflow:hidden;
}
.btn-file:hover {
background-image:url(bg-btn-hover.jpg);
}
.btn-file input {
position:absolute;
top:0;
left:0;
width:156px;
height:43px;
opacity:0;
filter: alpha(opacity:0);
cursor:pointer;
}
ok，经过这么一折腾，文件选择按钮就比浏览器默认的好多了。
效果图：
最后，附上Demo及源码下载吧
Demo Download