话说默认的样式超级难看，而这个东西又比较特殊，input其他的类型都可以自定义的，唯独file不能被改变。

起初上网搜索了一下，都说不能改变，无奈。

都是用一个text和一个button的input，然后隐藏掉file，再用js控制。也挺简单，看下面代码：

<script>
function fileup(){
var fileup = document.getElementById("fileupload");
file.click();
}
function change(){
var file = document.getElementById("file"),
fileup = document.getElementById("fileupload");
fileup.value = file.value;
}
</script>
<input type="text" id="fileupload" />
<input type="button" id="button" value="browse" onclick="fileup()" />
<input type="file" id="file" onchange="change()" style="display:none;" />

就是当鼠标点击button时，用js触发file的点击动作，然后激活了file控件，再在file空间内容改变的时候，也就是选择了文件的时候用file的值填充到text里面去。

由于file是隐藏的，你只能看见选择文件的窗口。

这有个问题就是你不能获取得到file控件里面文件的完整路径，只能获取得到文件名，也就是写到text里面的值只有文件名，不含文件路径。一般的file控件选择文件之后是含有文件路径加文件名的，据说这个是浏览器的原因，出于安全性的考虑。

不过有网友还是通过js获取到了file控件内容的完整路径+文件名的值，不过这样子需要写多点代码，而且还有兼容性问题，也不是太好搞，所以没有特殊要求就这样就OK了。

text、和button类型的input外观是可以用css控制的。