Maison > interface Web > tutoriel HTML > 如何更改input file 的按钮?_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-21 09:41:20
original
1521 Les gens l'ont consulté

本帖最后由 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>
Copier après la connexion


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

都是这样的,何必改呢?

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal