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

编辑器加载中...每次写完的东西就忘了，下次用时还要重查资料重新写，这是今天写的一段测试代码，保留下来，记录给自已，同时分享给大家。目标：把下边的这个上传文件的input样式和文字改成一句话“上传图片”，同样实现上传图片的功能。难点 1、不同浏览器的样式表现不同。 2、文字如果只用click这样的方式是不可以的。 3、input 上的文字是没有办法更改的。解决的方法用Javascript 尝试了很多种方法，都不行，很麻烦。最后在网上看到一个人写的一个办法，给了些启发，于是只用两行CSS来解决这个问题。如果直接在文字上加onclick事件来实现input的click()，这时选中文件是可以的，但这样的方式在表单submit时就失效了。所以说，file input 必须是真正的点击才有效果。于是，就想了个办法，把input 放在文字的上边，弄成透明的，这样在点文字时，实际是点击了input，这样就实现了文件的上传。第一步我把input 用CSS改成比较大的，放在文字的后边，这样点文字时，其实是点了Input。

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type file test - zishu.cn</title>
</head>
<style>
#uploadImg{ font-size:12px; border:1px solid #CC0000;  position:absolute}
#file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:10;filter:alpha(opacity=10); margin-top:-5px;}
</style>
<body>
<span id="uploadImg">
<input type="file" id="file" size="1" >
<a href="#">上传图片</a> </span>
</body>
</html>

第二步

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

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type file test - zishu.cn</title>
</head>
<style>
#uploadImg{ font-size:12px; border:1px solid #CC0000; overflow:hidden; position:absolute}
#file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:10;filter:alpha(opacity=10); margin-top:-5px;}
</style>
<body>
<span id="uploadImg">
<input type="file" id="file" size="1" >
<a href="#">上传图片</a> </span>
</body>
</html>

最终的效果

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

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type file test - zishu.cn</title>
</head>
<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>
<body>
<span id="uploadImg">
<input type="file" id="file" size="1" >
<a href="#">上传图片</a> </span>
</body>
</html>

就是这样，知道了原理，你就可以随意的更改文字和样式了，改成图片，改成按钮都没有问题。 2、这种方法看上去有点土，但简单，实用，适用我电脑上的所有浏览器（ie6/ie7/firefox）。 File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器原文地址为：http://www.zishu.cn/09/859.html

posted on 2012-10-26 17:14 dz45693 阅读(7377) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

dz45693

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

导航

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔档案 (362)

文章档案 (59)

SharePoint2010

阅读排行榜

评论排行榜

推荐排行榜

最新评论