《
利用label标签和CSS美化文件上传表单(不兼容IE6)》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302339142013.htm
view sourceprint?
1 <DIV class=btns>,利用CSS让元素垂直居中的两种实现方法;
首先，咱们要新增一个与file相册大小的button按钮，然后利用label为初始的file类型表单定义标注(对于label的说明与用法，此处不详解，不懂得的请自行查阅HTML手册)。如斯一来，一个可以触发取舍文件表单的按钮就出来了。接下来，信任许多人都晓得怎么做了。
有了一个能够触发file表单的按钮，只有通过相对定位将file表单从文档流中拖出，而后用z-index属性将它的层级晋升到比button按钮高，同时将file表单的透明度置为0，这样一来，file表单就正好笼罩在button按钮上了，并且可触发抉择文件表单。此处有一点需要阐明，FireFox中是无奈通过width来设定宽度值的，所以需要用input的size值来设定file表单宽度值,利用css的border属性实现导航条三角效果代码。
最后，附上样例中的成型代码：
HTML代码:
3 .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按钮的高宽一定要雷同,利用CSS的@font-face属性 在网页中嵌入字体；
2.因各阅读器对file表单的表示不一致，其边框必定要暗藏掉，免得呈现各浏览器不兼容问题,利用CSS滤镜让网页效果更有风格；
3.firefox中直接通过款式定义width是无效的，须要用size设置file宽度；
4.IE6可用JS为button绑定file表单的点击事件，此处不胪陈。
文件上传类型表单<input type=&rdquo,利用CSS制作动感导航栏;file” />是一个让良多前端开发者纠结过的表单类型，由于它是一个无法单纯用CSS给它定义兼容的样式。上周的工作中有个批量上传图片的页面，又碰到了这个问题，于是,利用CSS优化,让你的站点加载的更快，今天把我的解决计划贡献给大家：利用label标签与CSS独特打造一个样式可控的并兼容IE6之外主流浏览器的上传表单。
实现思路艰深易懂：
--> [
网站建设之]利用label标签跟CSS美化文件上传表单(不兼容IE6)
3 <LABEL for=input_file_molding>
另，本文供给的是一种主体思路，你可以在此思路上做进一步的美化扩大，比方加背景图片文字样式等等。
2 <INPUT id=input_file_molding class=btn_file_molding size=6 type=file>
Tag：上传 ,
利用css3绘制小图标的效果; 兼容 文件 丑化 ,
利用CSS3的checked伪类实现OL的隐藏显示; 标签 应用
view sourceprint?
1 .btns{position:relative} ,初识高并发网站系统架构;
4 <INPUT value=增加照片 type=button></LABEL>
5 </DIV>
CSS代码:
2 ,初识CSS（初学者必看）.btns input{width:120px;height:30px}
(责任编辑：网站建设)
利用label标签和CSS美化文件上传表单(不兼容IE6)相关文章