搜索:
首页 >> 下载中心 >> CSS/HTML源码 >> 文件上传表单的美化

文件上传表单的美化

2008-6-29 作者:ximicc 来源:ximicc blog 投递文章

一直以来文件上传表单<input type="file" />是表单美化设计噩梦,没有一种方法能良好的满足设计者的要求,本文将通过一种简单、三段式的设计思路,来解决这个长久的困扰。在开始HTML、CSS、JS细节讲解之前,你可以先看看演示效果

1.HTML:

<label class="cabinet"> 
    <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);
}

外围容器样式cabinet的前三条语句都与背景图片相关,包括位置和尺寸,其中的长、宽定义必须与图片的大小保持一致。为了让最终效果中的表单元素不可见,但是要保持上传浏览功能,CSS中主要通过设置opacity属性来实现,-moz-opacity语句是针对FF浏览器的补充。

3.JavaScript:

这部分本人没什么基础,也就不作苍白的解释了,大家可以在本文末尾下载源文件自行研究。注意CSS中用于隐藏表单的opacity属性,不能用display:nonevisibility: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

Tags:上传  表单  美化  设计 
相关文章
手机版 CSS/HTML源码 Asp之家 Aspxhome.com
闽ICP备06017341号