如何更改input file 的按钮？_html/css_WEB-ITnose-HTML Tutorial-php.cn

如何更改input file 的按钮？_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 09:41:20

Original

1521 people have browsed it

本帖最后由 bxh96 于 2013-01-15 11:51:32 编辑

input file

哪位高手指点一下，如何更改input file 的按钮，主要是按钮上的文字，不想要“浏览”？越详细越好谢谢

回复讨论(解决方案)

这个没有改过，一般是用一个DIV，然后定位到input file上面，把它遮住。

我一般是把它隐藏掉，然后另外写一个按钮，点击这个按钮的时候触发input file按钮的click事件

这个好像不行吧。可以另外做个按钮，用脚本控制input文件，点击按钮时激发input文件。input这个做隐藏。这样可以实现。

模拟的也贴个代码学习中

<style type="text/css">.button{width:100px;height:30px;}.fileupload{filter:Alpha(opacity=0);opacity:0;position:absolute;z-index:1}</style><input id="fileupload" class="button fileupload" type="file" /><div style="position:absolute;top:40px;left:100px;background:green;height:100px;width:300px">	<button id="btnUpload" type="button" class="button">点我试试看</button></div><script type="text/javascript">	function offset(ele){		if(!ele || ele.nodeType != 1){			return null;		}		if(!ele.parentNode){			return {top:ele.offsetTop,left:ele.offsetLeft};		}		var os = offset(ele.parentNode) || {};		return {top:ele.offsetTop + os.top || 0,left:ele.offsetLeft + os.left || 0};	}	var fileuploader = document.getElementById("fileupload"),	    btnUploader = document.getElementById("btnUpload");	var o = offset(btnUploader);	fileuploader.style.top=o.top+"px";	fileuploader.style.left=o.left+"px";</script>

Copy after login

原理很简单，把fileupload控件做成透明的，覆盖在你的按钮上就O了。

都是这样的，何必改呢？