《
巧用label标签和CSS美化文件上传表单(不兼容IE6)》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302341522013.htm
另，本文供给的是一种主体思路，你可以在此思路上做进一步的美化扩大，比方加背景图片文字样式等等。
--> [
网站建设之]巧用label标签跟CSS美化文件上传表单(不兼容IE6)
文件上传类型表单<input type=”file” />是一个让良多前端开发者纠结过的表单类型,
巧用CSS换行让网站更美观，由于它是一个无奈单纯用CSS给它定义兼容的样式。上周的工作中有个批量上传图片的页面，又碰到了这个问题，于是，今天把我的解决计划贡献给大家：应用label标签与CSS独特打造一个款式可控的并兼容IE6之外主流阅读器的上传表单。
实现思路艰深易懂：
首先，咱们要新增一个与file相册大小的button按钮，而后利用label为初始的file类型表单定义标注(对于label的说明与用法，此处不详解，不懂得的请自行查阅HTML手册)。如斯一来，一个能够触发抉择文件表单的按钮就出来了。接下来，信任许多人都晓得怎么做了。
有了一个可以触发file表单的按钮，只有通过相对定位将file表单从文档流中拖出，然后用z-index属性将它的层级晋升到比button按钮高，同时将file表单的透明度置为0,
巧用cssText属性批量操作样式，这样一来，file表单就正好笼罩在button按钮上了，并且可触发取舍文件表单。此处有一点需要阐明，FireFox中是无法通过width来设定宽度值的，所以需要用input的size值来设定file表单宽度值。
最后，附上样例中的成型代码：
HTML代码: 1 <DIV class=btns> 2 <INPUT id=input_file_molding class=btn_file_molding size=6 type=file> 3 <LABEL for=input_file_molding> 4 <INPUT value=增加照片 type=button>,
屏蔽网页图片工具栏的两种方法;</LABEL> 5 </DIV>
CSS代码:
Tag： label标签 CSS 丑化 文件上传 表单 label标签 CSS ,
屏幕分辨率和网页布局简述; 美化 文件上传 表单
1 .btns{position:relative} 2 .btns input{width:120px;height:30px} 3 .btns .btn_file_molding{position:absolute;left:0;top:0;z-index:1;border:0 none,
尼尔森的F型网页浏览模式;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美化文件上传表单(不兼容IE6)相关文章