html自定义表单样式,自定义表单——美化你的文件载入框

表单的制作常常给我们带来无比的烦恼，比如说表单中的“input[type="radio"]、input[type="checkbox"]、select和input[type="file"]”之类，我们都无法直接通过样式来达到设计的设计要求，如果为了实现设计的设计的优美效果，我们必须通过CSS和js来实现。前面我们在《自定义表单——jQuery制作个性化Checkbox》一文中一起学习了通过jQuery和CSS3来美化表单中的“input[type="radio"]”和“input[type="checkbox"]”。今天在浏览外国bog时发现Shaun Inman在《style file inputs with css and the dom》教程中使用js和CSS来实现“”表单元素。特意整理了一下与大家一起分享。让大家在今年的表单制作中能通过这种方法让你在Web页面制作中使“input[type="file"]”样式修改不在是那么的头疼。

下面我们一起来学习如何让“input[type="file"]”实现下图那种效果：

上图中很明显的告诉我们，前面的是“input[type="file"]”的默认效果，下面的是我们需要实现的效果。要实现下图的效果，我们首先需要从设计师的设计中切出下图：

现在我们知道我们的目标了，下面开始我们一起来学习如何实现上图展示的“input[type="file"]”表单元素效果。

一、HTML Markup

我们给表单元素“”定义了一个类名“file”，并且在他的外面包裹了一个名叫“cabinet”的“”标签。注：为了配合后面的“SI.Files.js”中的对象，我们最好在这里的包裹元素，以及其“input[type="file"]”元素和包裹他的“label”元素和他们定义的“class”类名都保持不变。当然要是你js比较厉害的话，你要根据你自己的需求去改变也无仿，只要能让他帮你实现功能就OK了。古话说的，不管白猫和黑猫只要能抓到老鼠的就是好猫。

二、CSS Code

.siFiles label.cabinet {

width: 79px;

height: 22px;

background: url("images/btn-choose-file.gif") 0 0 no-repeat;

display: block;

overflow: hidden;

cursor: pointer;

}

.siFiles input.file {

position: relative;

height: 100%;

width: auto;

opacity: 0;

-moz-opacity: 0;

filter: alpha(opacity=0);

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

}

我们通过上面的CSS样式来帮助我们实现表单元素的美化。当然大家并不一定要按照上面的样式一尘不变，你完全可以根据你自己的设计需求去写你自己需要的样式，我这里只是为了实现上图展示的效果写的一个简单的样式。

三、javaScript Code

下面也是我们今天这个教程中最关键的部分——美化“input[type="file"]”表单元素功能所需的js代码。说实在的，这部分代码我好多没有看懂，但照搬我还是会的。所以我直接从Shaun Inman写的《style file inputs with css and the dom》教程中把代码扣下来放在本站，让大家更好的阅读和学习：

// STYLING FILE INPUTS 1.0 | Shaun Inman | 2007-09-07

if (!window.SI) { var SI = {}; };

SI.Files =

{

bodyClass : 'siFiles',

fileClass : 'file',

wrapClass : 'cabinet',

fini : false,

able : false,

init : function()

{

this.fini = true;

var ie = 0 //@cc_on + @_jscript_version

if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } // no support for opacity or the DOM

this.able = true;

var body = document.getElementsByTagName('body')[0];

body.className += (body.className != '' ? ' ' : '') + this.bodyClass;

},

stylize : function(elem)

{

if (!this.fini) { this.init(); };

if (!this.able) { return; };

elem.parentNode.file = elem;

elem.parentNode.onmousemove = function(e)

{

if (typeof e == 'undefined') e = window.event;

if (typeof e.pageY == 'undefined' && typeof e.clientX == 'number' && document.documentElement)

{

e.pageX = e.clientX + document.documentElement.scrollLeft;

e.pageY = e.clientY + document.documentElement.scrollTop;

};

var ox = oy = 0;

var elem = this;

if (elem.offsetParent)

{

ox = elem.offsetLeft;

oy = elem.offsetTop;

while (elem = elem.offsetParent)

{

ox += elem.offsetLeft;

oy += elem.offsetTop;

};

};

var x = e.pageX - ox;

var y = e.pageY - oy;

var w = this.file.offsetWidth;

var h = this.file.offsetHeight;

this.file.style.top= y - (h / 2) + 'px';

this.file.style.left= x - (w - 30) + 'px';

};

},

stylizeById : function(id)

{

this.stylize(document.getElementById(id));

},

stylizeAll : function()

{

if (!this.fini) { this.init(); };

if (!this.able) { return; };

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++)

{

var input = inputs[i];

if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1)

{

this.stylize(input);

};

};

}

};

如果要是你和我一样不懂js的话也不用害怕，你只需要把上面的代码完全copy下来，保存成一个文件，我在此处将其保存在项目的“js”目录下，并且使命名为“si.files.js”。js代码扣下来以后，我们需要在项目中引用这个js:

当然大家在引用的时候需要注意您的路径，这一点不用我说应该知道吧。

“si.files.js”载入进来后并没有完成，我们还需要调用它：

SI.Files.stylizeAll();

这一部分怎么调用对于老手来说不用讲了，就慢碰到和我不懂一点js的人，你只要把这段代码放在刚才那个“si.files.js”后面就OK了。上面这个“si.files.js”还提供了两种调用的方法：

1、元素的ID名：

SI.Files.stylizeById('input-id');

这里的“input-id”指的就是你HTML Markup中“input[tpye="file"]”元素的ID名。

2、元素的节点：

SI.Files.stylize(HTMLInputNode);

四、工作原理

首先我们通一样式对其进行了外观的包装，让其达到设计图的要求。我们的包装元素“label”和其背景图片的尺寸刚好匹配了按钮的图像设置。接着我们把“input[type="file"]”元素也就是我们所说的文件输入框本身的透明度设置为“0”，让他产生一种假像的“隐藏”效果，但他仍然是可以点击的。不过这里有一点非常重要“大家不能为了说让“input[type="file"]”达到隐藏效果，直接将其设置为“display:none”和“visibility:hidden”。如果你真的是这样设置，那么你将带来灾难性的后果，你做的一切将是无效的。这一点大家一定要记住了。”最后在通过“si.files.js”实现文件输入框的功能效果。

五、浏览器的兼容性

这种实现方法能在“IE6+”、“Firefox1.5+”、“Safari2+”、“chrome”、“opera”下正常工作。

那么通过上面几步我们就解了一个让我们头痛的表单元素美化工作。有关于上面的代码，大家可以直接到这里下载。

不知道大家整明白没有，我只知道一个所以然，因为我不太懂js，但我在本地按上面的方法执行下来，已经达到前面图片展示的效果。如果你要是js知道的，你可以完全整明白，要是和我一样js不懂，就把整个js复制下来按上面的操作一步一步做吧。如果你还是不清楚，你可以直接浏览Shaun Inman写的教程——《style file inputs with css and the dom》。

那么到此有关于使用js和CSS来美化“input[type="file"]”就说到这里了，在结束之前再次感谢Shaun Inman给我们带来这么好的教程《style file inputs with css and the dom》，同时希望大家能喜欢，并且能有所值。如果您有更好的解决方法，也可以和我们一起分享。

如需转载烦请注明出处：