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

php中文网
发布: 2016-06-21 09:41:20
原创
1704人浏览过

本帖最后由 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了。

都是这样的,何必改呢?

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号