文件上传表单的美化
一直以来文件上传表单<input type="file" />是表单美化设计噩梦，没有一种方法能良好的满足设计者的要求，本文将通过一种简单、三段式的设计思路，来解决这个长久的困扰。在开始HTML、CSS、JS细节讲解之前，你可以先看看演示效果。
1.HTML：
<label class="cabinet">
<input type="file" class="file" />
</label>
<input type="file" class="file" />
</label>
在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);
}
{
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+
4.源代码下载：
下载地址：
styling-file-inputs.zip （3.45 KB）
原文地址：STYLING FILE INPUTS WITH CSS AND THE DOM
站长工具
相关文章
请稍等，评论加载中...