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

上周工作中，我遇到了批量上传图片页面中的一个常见问题，并成功地找到了解决方案。今天，我想与大家分享这一方案：利用HTML的``标签和CSS共同打造一个样式可控、兼容IE6之外主流浏览器的上传表单。

我们的实现思路非常直观易懂。我们需要新增一个与file相册大小相匹配的button按钮。然后，利用``标签为初始的file类型表单定义标注。这样，一个简单的触发选择文件表单的按钮就制作完成了。接下来，大家都知道怎么做了吧？

有了这个触发file表单的按钮，我们只需通过绝对定位将file表单从文档流中拖出，然后使用z-index属性将其层级提升到高于button按钮。我们将file表单的透明度设置为0，使其正好覆盖在button按钮上，并且可触发选择文件表单。这里有一个细节需要注意，在FireFox浏览器中，我们无法直接使用width来设定file表单的宽度，因此需要通过input的size值来设定。

以下是样例中的成型代码：

HTML代码：

```html

```

CSS代码：

```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表单的点击事件，此处未详细叙述。

这个方案为主体思路提供了一种实现方式，你可以在此基础上进行进一步的美化扩展，如添加背景图片、文字样式等，以满足不同页面的设计需求。