File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
来源:互联网 发布:cnki的子数据库 编辑:程序博客网 时间:2024/05/21 22:44
每次写完的东西就忘了,下次用时还要重查资料重新写,这是今天写的一段测试代码,保留下来,记录给自已,同时分享给大家。
目标:
把下边的这个上传文件的input样式和文字改成一句话“上传图片”,同样实现上传图片的功能。
难点
1、不同浏览器的样式表现不同。
2、文字如果只用click这样的方式是不可以的。
3、input 上的文字是没有办法更改的。
解决的方法
用Javascript 尝试了很多种方法,都不行,很麻烦。最后在网上看到一个人写的一个办法,给了些启发,于是只用两行CSS来解决这个问题。
如果直接在文字上加onclick事件来实现input的click(),这时选中文件是可以的,但这样的方式在表单submit时就失效了。所以说,file input 必须是真正的点击才有效果。
于是,就想了个办法,把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传。
第一步
我把input 用CSS改成比较大的,放在文字的后边,这样点文字时,其实是点了Input。
第二步
最终的效果
再把Input弄成百分百透明就可以了。
1、原理就是这样,知道了原理,你就可以随意的更改文字和样式了,改成图片,改成按钮都没有问题。
2、这种方法看上去有点土,但简单,实用,适用我电脑上的所有浏览器(ie6/ie7/firefox)。
File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器 原文地址为:http://www.zishu.cn/09/859.html
目标:
把下边的这个上传文件的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>
1、原理就是这样,知道了原理,你就可以随意的更改文字和样式了,改成图片,改成按钮都没有问题。
2、这种方法看上去有点土,但简单,实用,适用我电脑上的所有浏览器(ie6/ie7/firefox)。
File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器 原文地址为:http://www.zishu.cn/09/859.html
- File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
- File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
- File input 的样式和文字的更改方法
- File input 浏览上传按钮样式和文字的更改方法
- File input 浏览上传按钮样式和文字的更改方法
- input file本地图片预览的方法(兼容IE、Chrome和Firefox)
- 更改input等的默认样式
- IE浏览器下的Input File详解
- Html Input File Preview 选择后立即预览 兼容IE,Firefox,Chorom等主流浏览器
- Html input[type=file]在chrome浏览器和safari浏览器 与 IE firefox差别修改
- 适用于IE和Firefox的剪贴板javascript函数
- 适用于IE和Firefox的iframe自适应高度JS代码
- 适用于IE和Firefox的iframe自适应高度JS代码
- 更改上传文件的样式<input type="file>
- Bootstrap中关于input里file的样式更改
- 更改actionBar的背景和文字样式
- input file 的样式
- (转) IE和FireFox浏览器的兼容问题
- Flex项目ant编译脚本初探
- 关于Sql关键字SELECT FROM GROUP ORDER 等的执行顺序问题的解释
- 编程
- ArcGIS Engine控件运行许可
- “Jquery对象”的本质和构造思路
- File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
- C#实现从dll程序集中动态加载窗体
- 原创伤感qq日志-早已习惯两指之间夹着烟的孤单
- 用 GTest 来测试MFC 程序 TDD开发
- ArcGIS Server for JavaScript api安装部署
- C# 反射动态加载窗口
- continuity不收敛的问题
- DEDECMS单个标签小于12字节的限制修改方法
- Android中使用ViewPager和PagerTabStrip实现页面滑动效果