首页 > web前端 > html教程 > 如何更改input file 的按钮?_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-21 09:41:20
原创
1522 人浏览过

本帖最后由 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>
登录后复制


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

都是这样的,何必改呢?

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板