file表单元素怎样设置浏览按钮的样式

我们在程序开发中，经常要用到上传文件的功能。但是，<input type="file" id="f"
name="f">这个类型的元素，产生的文件框和浏览按扭，它们的样式往往不符合我们的需要。怎么样才能控制控制它们的样式和位置呢？

解决思路：
1、放一个text类型的文本框。

2、放一个button类型的按扭。
3、放一个file类型。

4、调整button和file的样式，目标：将file隐藏，使其位置和button位置重叠。

5、当上传框file的值有所改变时通过onchange事件句柄执行text.value=this.value，即保持真正的上传框与模拟的上传框的值同步更新。

总结：上传框带有两个控件：一个文本框和一个按钮。定义的样式对文本框全部生效，对于按钮，只有边框样式、字体大小和外观尺寸生效。看来直接用CSS定义它的外观是行不通的。我们知道，大部分控件都有一个单击(click)事件句柄，上传框在单击"浏览..."按钮时会弹出"选择文件"对话框，如果我们自己模拟一个上传框：一个文本框(<input
type="text">)和一个按钮(<input
type="button">或<button>Text</button>)，在单击自定义按钮时同时触发上传框的click事件让它弹出"选择文件"对话框...
...。在点击"上传文件"按钮时执行t_file.click()，当上传框的值有所改变时通过onchange事件句柄执行f_file.value=this.value，即保持真正的上传框与模拟的上传框的值同步更新，style="display:none"让真正的上传框隐藏，使模拟的文件上传框能以假乱真------。

代码示例：
<style>input{border:1px solid
green;}
div
{width:300px;position:relative;}
p
{float:left}
.file
{position:absolute;top:20px;right:300px;+top:0;+right:73px;width:0px;height:20px;

filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
#txt
{height:20px;margin:1px}
#ii
{width:70px;height:20px;margin-top:2px;border:none;}

</style>

<div>
<form
method="post" action=""
enctype="multipart/form-data">
<p><input
type="text" id="txt" name="txt" /></p>

<p><input id="ii" type="image"
src="uploads/200702/05_125319_index_search_02.gif" value="选择"
/></p>
<p><input type="file"
onchange="txt.value=this.value" class="file"
/></p>

</form>
</div>

具体可以参照：http://blog.ha371.com/article.asp?id=34&page=3