表格的制作常常给我们带来无比的烦恼。 例如，表单中的“input[type='radio']”、input[type='checkbox']”、select和input[type='file'] 今天，查看外国bog时，我发现Shaun Inman在《自定义表单——jQuery制作个性化Checkbox》教程中使用js和CSS实现了“”表单元素。 我特意整理了一下，和大家分享了。 让大家在今年的表格制作中用这种方法在网页制作中修改“input[type='file']”样式是那么头疼。
让我们一起学习“input[type='file']”如何实现下图所示效果。
如上图所示，前面的是“input[type='file']”的默认效果，下面的是我们需要实现的效果。 为了实现下图的效果，首先需要从设计师的设计中切出下图：
我在这里明白了我们的目标。 让我们一起学习如何实现上图所示的“input[type='file']”表单元素的效果。
一. html标记
为窗体元素“”定义了类名“file”，并将名为“cabinet”的“”标记包在了他的外面。 注：为了匹配后面的“SI.Files.js”对象，这里的包装元素、其“输入[ type=' file ' ]”元素和包装他的“label”元素以及他们定义的“claral” 当然如果你的js很厉害，你必须根据自己的需要改变。 如果能实现功能就OK了。 俗话说，白猫黑猫都能抓住老鼠就好了猫。
二. CSS码
. siFiles label.cabinet {
width: 79px；
height: 22px；
后台： URL (images/BTN-choose-file.gif )0 0 no-repeat；
显示： block；
Overflow :隐藏；
cursor: pointer；
}
. siFiles input.file {
position: relative；
height: 100%；
width :自动；
opacity: 0；
-moz-opacity: 0；
过滤器：阿尔法(Opacity=0)；
过滤器： progid : dximagetransform.Microsoft.alpha (opacity=0)；
}
用上面的CSS风格帮助美化表单元素。 当然，大家并不一定要按照上面的风格一成不变。 你完全可以根据你自己的设计需求写下你自己需要的风格。 我只是在这里写了一个简单的样式来实现上图所示的效果。
三. JavaScript代码
以下是美化当今教程最重要的部分——“input [ type=' file ' ]表单元素的功能所需的js代码： 其实，我不太清楚这部分的代码，但也可以直接做。 所以，我会直接从Shaun Inman写的《style file inputs with css and the dom》教程中抽出代码放在本站上，让大家更好地阅读和学习：
//stylingfileinputs 1.0|Shaun inman|2007-09-07
if (！ window.si({varsi={}； (；
SI.Files=
{
bodyClass : 'siFiles '，
fileClass : 'file '，
wrapClass : 'cabinet '，
fini : false，
able : false，
init :功能()
{
this.fini=true；
varie=0//@ cc _ on @ _ jscript _ version
if(window.opera||(ieie5.5|！ document.getElementsByTagName ) { return； } //no support for opacity or the DOM
this.able=true；
var body=document.getElemen
tsByTagName('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》，同时希望大家能喜欢，并且能有所值。如果您有更好的解决方法，也可以和我们一起分享。
如需转载烦请注明出处：