---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

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

前端开发 蚂蚁 4449℃ 0评论

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

目标:

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

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

解决的方法

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

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

于是,就想了个办法,把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>  

input type file test

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器

喜欢 (2)or分享 (0)
发表我的评论
取消评论

表情
(3)个小伙伴在吐槽
  1. 来看看。。。
    星梦 XmGho.com2015-05-21 13:54 回复
  2. 今天才发现你的博客,连着看了几篇呢! 诚交友链 站务申请:www.xevip.cn
    www.xevip.cn2016-11-30 07:58 回复