CSS美化文件域（文件选择框 input type=file）

演示效果截图

CSS代码

<style>
input{border:1px solid #ff9900;}
div {width:300px;position:relative;}
p {float:left}
.file {position:absolute;top:20px;right:300px;top:0;
right:73px;width:0px;height:30px;filter:alpha(opacity=0);
-moz-opacity:0;opacity:0;}
#txt {height:20px;margin:1px}
#ii {width:70px;height:24px;margin-top:1px;
margin-top:2px;_margin-top:2px;}
</style>

HTML代码

<div>
<form method="post" action="" enctype="multipart/form-data">
<p><input type="text" id="txt" name="txt" /></p>
<p><input id="ii" type="button" value="选择文件" /></p>
<p><input type="file" οnchange="txt.value=this.value" class="file" />
</p>
</form>
</div>