原文地址：STYLING FILE INPUTS WITH CSS AND THE DOM
翻译整理：西米CC
一直以来文件上传表单是表单美化设计噩梦，没有一种方法能良好的满足设计者的要求，本文将通过一种简单、三段式的设计思路，来解决这个长久的困扰。在开始HTML、CSS、JS细节讲解之前，你可以先看看演示效果。
1.HTML：
- <label class="cabinet"></label>
- <input class="file" type="file" />
在HTML结构中，我们把文件上传表单放置到一个应用了cabinet样式的label容器中，而表单本身也被赋予了一个名为file的样式。整个效果涉及到一个HTML文档、一张背景图和一个名为si.files的JS文件，我们用于包含表单的容器元素类型或其中涉及的样式类名可以修改，但是注意要与si.files.js中的声明保持一致。
2.CSS样式：
- .SI-FILES-STYLIZED label.cabinet
- {
- width: 79px;
- height: 22px;
- background: url(btn-choose-file.gif) 0 0 no-repeat;
- display: block;
- overflow: hidden;
- cursor: pointer;
- }
- .SI-FILES-STYLIZED label.cabinet input.file
- {
- position: relative;
- height: 100%;
- width: auto;
- opacity: 0;
- -moz-opacity: 0;
- filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
- }
外围容器样式cabinet的前三条语句都与背景图片相关，包括位置和尺寸，其中的长、宽定义必须与图片的大小保持一致。为了让最终效果中的表单元素不可见，但是要保持上传浏览功能，CSS中主要通过设置opacity属性来实现，-moz-opacity语句是针对FF浏览器的补充。
3.JavaScript：
这部分本人没什么基础，也就不作苍白的解释了，大家可以在本文末尾下载源文件自行研究。注意CSS中用于隐藏表单的opacity属性，不能用display:none或visibility:hidden来代替，会影响到表单上传文件的功能。
兼容测试已经通过：IE 5.5+ Firefox 1.5+ Safari 2+
