话说，文件上传控件的样式，就如同下拉框的样式一样，没办法通过 CSS 直接进行控制，虽然不影响正常的网页浏览，但是对于一个设计师的心血来说，不能完全还原，还是比较令人郁闷的，但是，活人总不能叫尿憋死，所以总是有很多方法能够达到我们的目的，例如： Mr.Think 的这篇文章，或者这篇文章。但是第一个不兼容IE6，比较遗憾，虽然我现在在自己的项目上坚决不支持IE6，但是，解决方法还是要掌握的。
另一个因素就是 Chrome 下的空间样式和 IE 以及 火狐下不同，具体就不举例子了。
最近想到这个问题，所以写出来和大家分享下，也兼容IE6，那就是，用一个层，将 input 空间给包裹起来，然后将控件相对定位，将包裹的层，例如 a 绝对定位到控件之上，并且给其样式，可以使用 span 或者 a 元素，由你喜欢，但是为了兼顾 IE6 ，还是用 a 比较好，因为 a 可以在 IE6 下产生 手型 的鼠标样式。所以这里就拿 a 来举例，span 或者其他的，就自己发挥吧。
先看图。
那么接下来，就看代码了。
先是结构
<input type="text" id="a" readonly="readonly" />
<a href="javascript:void(0);" class="input">
浏览
<input type="file" id="file">
</a>此处第一个 input 为模仿 文件路径的输入框，使用 javascript 在选择完成之后，把文件路径填到此处。第二个 a 标签模仿控件，第三个 input 是实际起作用的控件，只不过隐藏了而已。
然后是 CSS
a.input {
width:100px;
height:25px;
line-height:25px;
background:#08f;
text-align:center;
display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
overflow:hidden;/*去掉的话，输入框也可以点击*/
position:relative;/*相对定位，为 #file 的绝对定位准备*/
}
a.input:hover {
background:#f80;
}
a{
text-decoration:none;
color:#FFF;
}
#file {
opacity:0;/*设置此控件透明度为零，即完全透明*/
filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
font-size:100px;
position:absolute;/*绝对定位，相对于 .input */
top:0;
right:0;
}然后是 javascript 代码，此处给了 原生的 javascript 和 jQuery 方式。
原生 javascript
<script type="text/javascript">
var input1 = document.getElementById("file");// 获得控件对象
input1.onchange = inputPath; //当控件对象 input1 有变化时执行函数 inputPath
function inputPath() {
var input2 = document.getElementById("a"); // 获取 input 对象 input2
input2.value=input1.value; // 将控件 input1 的值赋给 input2
}
</script>jQuery 方式
<script type="text/javascript">
$(function(){
$("#file").change(function(){ // 当 id 为 file 的对象发生变化时
$("#a").val($("#file").val()); //将 #file 的值赋给 #a
})
})
</script>OK，打完收工.
对，还有演示呢：
