file表单元素怎样设置浏览按钮的样式-优快云博客

本文介绍了一种使用HTML和CSS来定制文件上传框样式的技巧，包括如何隐藏默认的文件选择框并用自定义按钮替代，以及如何保持真实上传框与模拟上传框值的同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在程序开发中，经常要用到上传文件的功能。但是，<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"> <input type="text" id="txt" name="txt" /> <input id="ii" type="image" src="uploads/200702/05_125319_index_search_02.gif" value="选择" /> <input type="file" onchange="txt.value=this.value" class="file" /> </form> </div> 具体可以参照：http://blog.ha371.com/article.asp?id=34&page=3