当前位置: 网站建设 > 网页设计 > 建站经验 >

利用label标签和CSS美化文件上传表单(不兼容IE6)

时间:2013-03-02 03:57来源:未知 作者:admin 点击:

标签:利用label标签和CSS美化文件上传表单(不兼容IE6) 标签(23)表单(17)不兼(2)上传(2)CSS(655)文件(18)label(2)美化(7)利用(28)
view sourceprint? 1 DIV class=btns 首先,咱们要新增一个与file相册大小的button按钮,然后利用label为初始的file类型表单定义标注(对于label的说明与用法,此处不详解,不懂得的请自行查阅HTML手册)。如斯一来,一个可以触发取舍文件表单的按钮就出来了。接下来,信任许多人都晓得怎么做了。 有了一个能够触发file表单的按钮,只有通过相对定位将file表单从文档流中拖出,而后用z-index属性将它的层级晋升到比button按钮高,同时将file表单的透明度
利用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)相关文章
上一篇:利用CSS让元素垂直居中的两种实现方法 下一篇:利用光影的五个网页设计技巧
回到顶部