修改 input file 样式

普通的 input file 样式，会根据浏览器的不同而显示不同的效果，IE显示的是，左边一个文本框，右边一个按钮的形式，谷歌显示的是，左边一个按钮，右边一个label，火狐与谷歌相同，但是按钮上的文字又不一样，网上的一些文章写修改file的样式，大多都是用一个文本框，一个按钮或是超链接等等其他的标签来替换，这种方法是可以达到input file一样的效果，但是，我在一个项目中，涉及到异步上传文件，在这中，我发现了一个问题，就是用上面的那种方法，上传时，无法将文件传输到服务器中，至于是什么原因，暂时还未不清楚。废话不多说，下面就是修改样式的方法：

1：

<style type="text/css">
.input_text{// 文本框样式

}
.input_button{// 按钮样式

}
.input_file{// input file 样式，宽高为0，或display:none
  width: 0px;
  height: 0px;
}
</style>
<script type="text/javascript">
function checkFile(){
  document.getElementById("file1").click();
}
</script>

<input type="text" class="input_text" id="txtFile" name="txtFile" value="" />
<input type="button" class="input_button" value="浏览..." onclick="checkFile()" />
<input type="file" class="input_file" id="file1" name="file1" onchange="document.getElementById('txtFile').value=this.value" />

2：(我用的方法。将file放在a中，并设置为透明，使用span文字)

a{

display:inline-block;

width:80px; height:32px;

background:red;

position:relative;

overflow:hidden;

}
a:hover{

background:green;

}
._label {
display:block;
position:relative;
}
._span {
position:absolute;
float:left;
line-height:30px;
left:10px;
cursor:text;
font-size: 16px;
color: #000000;
}
input{

position:absolute; 

right:0; 

top:0; 

font-size:100px;

opacity:0;

filter:alpha(opacity=0);

}
</style>
<a>
<lable class="_label"><span class="_span">浏览...</span><input type="file" name="file1"/></lable>
</a>