搜索:
首页 >> 网页设计 >> CSS/HTML >> File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器

File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器

2009-10-13 作者:zishu 来源:zishu博客 投递文章

每次写完的东西就忘了,下次用时还要重查资料重新写,这是今天写的一段测试代码,保留下来,记录给自已,同时分享给大家。

目标:

把下边的这个上传文件的input样式和文字改成一句话“上传图片”,同样实现上传图片的功能。



难点

1、不同浏览器的样式表现不同。
2、文字如果只用click这样的方式是不可以的。
3、input 上的文字是没有办法更改的。

解决的方法

用Javascript 尝试了很多种方法,都不行,很麻烦。最后在网上看到一个人写的一个办法,给了些启发,于是只用两行CSS来解决这个问题。

如果直接在文字上加onclick事件来实现input的click(),这时选中文件是可以的,但这样的方式在表单submit时就失效了。所以说,file input 必须是真正的点击才有效果。

于是,就想了个办法,把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传。

第一步

我把input 用CSS改成比较大的,放在文字的后边,这样点文字时,其实是点了Input。

[提示:你可先修改部分代码,再按运行]

第二步

再更改一下CSS,把多出的Input部分隐藏就可以了。

[提示:你可先修改部分代码,再按运行]

最终的效果

再把Input弄成百分百透明就可以了。

[提示:你可先修改部分代码,再按运行]

完整的代码如下

<style>

#uploadImg{ font-size:12px; overflow:hidden; position:absolute}
#file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}
</style>

<span id="uploadImg">
<input type="file" id="file" size="1" >
<a href="#">上传图片</a> </span>

后结

1、原理就是这样,知道了原理,你就可以随意的更改文字和样式了,改成图片,改成按钮都没有问题。
2、这种方法看上去有点土,但简单,实用,适用我电脑上的所有浏览器(ie6/ie7/firefox)。

File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器 原文地址为:http://www.zishu.cn/blogview.asp?logID=859

Tags:file input  样式  文字  上传 
相关文章
手机版 CSS/HTML Asp之家 Aspxhome.com
闽ICP备06017341号