修改 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>