问题
在一个网站中可能我的输入框式下面这样的：
设计者可能想让上传部分也像这样然后再添加一个select按钮。但是当我想把普通的输入框改为上传框时就根本不能工作。浏览器之间有很大的不同，给默认按钮添加样式也几乎不可能。
这很难成为设计的很好的上传框，但是也是我们能做的最多的了。
注意到Safari的设计有些不同。Safari小组想关闭手动输入文件的功能，可能担心这样的溢出。这样设计有个缺点就是用户在选择了一个文件之后不能取消上传文件。
读者Michael McGrady发明了一个不错的小技巧来解决给上传按钮添加样式的问题。这个页面上的所有解决办法都是他发明的，我只是添加了position:relative，一些注释和测试，然后转为JavaScript。
没有使用这个技巧的时候：
使用了之后我想成为这样：
现在看起来好多了不是么？
McGrady的方法很简单且优雅：
1、设置一个普通的<input type="file">，然后放置在包含postion:relative属性的元素中。
2、同样在父元素中，添加一个普通的<input>和一个图片，给他们设置样式。给他设置绝对位置让这个普通的input能够和<input type="file">重叠。
3、然后把<input type="file">的z-index设置为2，这样他就能在普通的input上面显示。
4、最后将<input type="file">的opacity设置为0。这样<input type="file">就看不见了，下面的input/image就能显现出来，但是你还能点击“浏览”按钮。如果这个按钮的位置在图片上面，那么看起来好像点击的就是图片一样。
注意你不能使用visibility：hidden，因为一个真正的不可见元素是不能点击的，我们需要一个能点击的不可见元素。
至此，这个效果可以通过纯CSS显示了，但是还差一点
5、当用户选择了一个文件之后，那个可见的假的输入框应该显示选择文件的路径，就像正常的<input type="file">一样。虽然只需要简单的把<input type="file">的内容复制过来，但是还是需要JavaScript的。
所以这个技术如果没有JavaScript可能不能完全实现。我一会会解释原因。我决定把整个这个想法写成JavaScript的。如果你想使用没有文件名显示的上传框的话也可以使用纯CSS方式，虽然这不是一个好办法。
HTML/CSS结构
我打算用下面的HTML/CSS结构：
复制代码 代码如下:
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div>
<input type="file" />
<div>
<input />
<img src="https://www.jb51.net/search.gif" />
</div>
</div>
<div>的位置是relative，这样我们就能在里面放置一个绝对位置的层：假的输入框。
<div>包含一个假的输入框和一个按钮，他的位置是绝对的，z-index值是1，这样他就能在真正的上传框下面显示。
真正的上传框也有位置属性relavtive，这样就能设置他的z-index值了。总之需要上传框在假的输入框之上显示。然后我们设置他的透明度为0，让他不可见。
还需要注意text-align:right：因为Mozilla不能设置上传框的宽度，所以我们要保证浏览按钮在DIV的右边缘，假的按钮也要在右边，而且应该在真的下面。
你还需要一些css代码来设置宽度高度边框等等，在这个例子中我没有写。
为什么是JavaScript？
使用JavaScript的第一个原因就是要把文件路径复制到假的文本框里。
第二，JavaScript会忽略掉没有意义的HTML代码：<div>，让代码保持干净。
最后，对于一些旧的浏览器不能处理CSS，在Netscape和IE4里面文件输入就不可访问。对于那些没有CSS的浏览器，用户会看到两个输入框，而且不能理解第二个是干嘛的。
Netscape 4的问题
在Netscape 4里面用户只能看见按钮。可能是因为position:absolute的原因。
IE4的问题在IE4里面会有一个诡异的原来的“浏览”按钮的影子，而且不能点击。没有解决办法
Netscape 3的问题对于那些没有CSS功能的浏览器。虽然可以使用，但是两个输入框会让用户郁闷。
解决办法-JavaScript