利用label标签和CSS美化文件上传表单(不兼容IE6)
发布时间:2011-06-20 21:30:43 作者:佚名
我要评论
![](/skin/2018/images/text-message.png)
文件上传类型表单是一个让很多前端开发者纠结过的表单类型,因为它是一个无法单纯用CSS给它定义兼容的样式。
上周的工作中有个批量上传图片的页面,又遇到了这个问题,于是,今天把我的解决方案奉献给大家:利用label标签与CSS共同打造一个样式可控的并兼容IE6之外主流浏览器的上传表单。
实现思路通俗易懂:
![利用LABEL与CSS美化文件上传表单 利用LABEL与CSS美化文件上传表单](//img.jbzj.com/do/uploads/allimg/110620/2132280.gif)
首先,我们要新增一个与file相册大小的button按钮,然后利用label为初始的file类型表单定义标注(关于label的解释与用法,此处不详解,不了解的请自行查阅HTML手册)。如此一来,一个可以触发选择文件表单的按钮就出来了。接下来,相信很多人都知道怎么做了。
有了一个可以触发file表单的按钮,只要通过绝对定位将file表单从文档流中拖出,然后用z-index属性将它的层级提升到比button按钮高,同时将file表单的透明度置为0,这样一来,file表单就正好覆盖在button按钮上了,并且可触发选择文件表单。此处有一点需要说明,FireFox中是无法通过width来设定宽度值的,所以需要用input的size值来设定file表单宽度值。
最后,附上样例中的成型代码:
HTML代码:
<DIV class=btns>
<INPUT class=btn_file_molding id=input_file_molding type=file size=6>
<LABEL for=input_file_molding>
<INPUT type=button value=添加照片></LABEL>
</DIV>
CSS代码:
.btns{position:relative}
.btns input{width:120px;height:30px}
.btns .btn_file_molding{position:absolute;left:0;top:0;z-index:1;border:0 none;filter:alpha(opacity=0);opacity:0}/*file的z-index要大于button*/
几个注意的细节:
1.file表单与button按钮的高宽一定要相同;
2.因各浏览器对file表单的表现不一致,其边框一定要隐藏掉,以免出现各浏览器不兼容问题;
3.firefox中直接通过样式定义width是无效的,需要用size设置file宽度;
4.IE6可用JS为button绑定file表单的点击事件,此处不详述。
另,本文提供的是一种主体思路,你可以在此思路上做进一步的美化扩展,比如加背景图片文字样式等等。
实现思路通俗易懂:
![利用LABEL与CSS美化文件上传表单 利用LABEL与CSS美化文件上传表单](http://img.jbzj.com/do/uploads/allimg/110620/2132280.gif)
首先,我们要新增一个与file相册大小的button按钮,然后利用label为初始的file类型表单定义标注(关于label的解释与用法,此处不详解,不了解的请自行查阅HTML手册)。如此一来,一个可以触发选择文件表单的按钮就出来了。接下来,相信很多人都知道怎么做了。
有了一个可以触发file表单的按钮,只要通过绝对定位将file表单从文档流中拖出,然后用z-index属性将它的层级提升到比button按钮高,同时将file表单的透明度置为0,这样一来,file表单就正好覆盖在button按钮上了,并且可触发选择文件表单。此处有一点需要说明,FireFox中是无法通过width来设定宽度值的,所以需要用input的size值来设定file表单宽度值。
最后,附上样例中的成型代码:
HTML代码:
复制代码
代码如下:<DIV class=btns>
<INPUT class=btn_file_molding id=input_file_molding type=file size=6>
<LABEL for=input_file_molding>
<INPUT type=button value=添加照片></LABEL>
</DIV>
CSS代码:
复制代码
代码如下:.btns{position:relative}
.btns input{width:120px;height:30px}
.btns .btn_file_molding{position:absolute;left:0;top:0;z-index:1;border:0 none;filter:alpha(opacity=0);opacity:0}/*file的z-index要大于button*/
几个注意的细节:
1.file表单与button按钮的高宽一定要相同;
2.因各浏览器对file表单的表现不一致,其边框一定要隐藏掉,以免出现各浏览器不兼容问题;
3.firefox中直接通过样式定义width是无效的,需要用size设置file宽度;
4.IE6可用JS为button绑定file表单的点击事件,此处不详述。
另,本文提供的是一种主体思路,你可以在此思路上做进一步的美化扩展,比如加背景图片文字样式等等。
相关文章
css input[type=file] 样式美化(input上传文件样式 )
这篇文章主要介绍了css input[type=file] 样式美化(input上传文件样式 )的相关资料,需要的朋友可以参考下2018-06-20基于jQuery+CSS3实现带动画效果文件上传插件特效源码
基于jQuery+CSS3实现带动画效果文件上传插件特效源码是一款基于jQuery+CSS3实现的上传界面,支持文件拖到上传动画代码。本段特效源码可以在各大网站使用,有需要的朋友直接2017-07-10HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
本篇文章主要介绍了HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量),现在html5提供了API以及File,FileReader,XMLHttpRequest等强大的API,为我们拖放实现上传提供2017-01-05- 文件上传input在各个浏览器里表现形式都不一样,这里通过css样式控制,尽量在多浏览器中的表现都一样2013-01-10
- 表单上传文件的“浏览”按钮修改代码,需要的朋友可以参考下。2011-05-03
- 这篇文章主要介绍了使用css画一个文件上传图案效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧2019-12-16
最新评论