Rumah > hujung hadapan web > html tutorial > 如何更改input file 的按钮?_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-21 09:41:20
asal
1563 orang telah melayarinya

本帖最后由 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>
Salin selepas log masuk


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

都是这样的,何必改呢?

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan