运用label标识和CSS清理文档提交表单(兼容问题I

2021-01-20 13:40 jianzhan
上星期的工作中中有个大批量提交照片的网页页面,又遇到了这个难题,因而,今日把我的处理计划方案无私奉献给大伙儿:运用label标识与CSS相互打造1个款式可控性的并适配IE6以外流行访问器的提交表单。
完成思路通俗化易懂:


最先,大家要新增1个与file相册尺寸的button按钮,随后运用label为原始的file种类表单界定标明(有关label的解释与用法,此处不详解,不上解的请自主查阅HTML手册)。这般1来,1个能够开启挑选文档表单的按钮就出来了。接下来,坚信许多人都了解如何做了。
有了1个能够开启file表单的按钮,要是根据肯定精准定位将file表单从文本文档流中拖出,随后用z-index特性将它的等级提高到比button按钮高,另外将file表单的全透明度置为0,这样1来,file表单就恰好遮盖在button按钮到了,而且可开启挑选文档表单。此处有1点必须表明,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按钮的高宽1定要同样;
2.因各访问器对file表单的主要表现不1致,其边框1定要掩藏掉,以防出現各访问器兼容问题难题;
3.firefox中立即根据款式界定width是失效的,必须用size设定file宽度;
4.IE6能用JS为button关联file表单的点一下恶性事件,此处不详细描述。

另,本文出示的是1种行为主体思路,你能够在此思路上做进1步的清理拓展,例如加情况照片文本款式这些。