分类
其他

模拟 input type=file 实现文件域在不同浏览器下的统一外观

原文地址:http://www.css88.com/archives/2256

表单中的 input type=”file” 在前端开发中经常会用到,但是很悲剧的是 input type=”file” 在各个浏览器下表现不统一,样式很难起作用。

input_type_file

通常我的设计师是非常爱美的,如果真的要还原设计稿,只能通过文本框和按钮去模拟一个 input type=”file”

HTML 代码如下:

<div class="type-file-box">
<form id="form1" method="post">
<input id="fileField" name="fileField" size="28" type="file" />
</form>
</div>

这是一个基本的 input type=”file” 。当然这里你可能没看到文本框和按钮的代码,我们可以在后面的js中将文本框和按钮追加到html中。

注意:size=”28″ 是在 firefox 下 input type=”file” 的宽高是不能通过样式来定义的,所以用了 size 属性来控制 input type=”file” 的宽度。

CSS 代码如下:

.type-file-box{ position:relative;width:260px}
input{ vertical-align:middle; margin:0; padding:0}
.type-file-text{ height:22px; border:1px solid #cdcdcd; width:180px;}
.type-file-button{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.type-file-file{ position:absolute; top:0; right:0; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }

注意:这里的 filter:alpha(opacity:0);opacity: 0 是让 input type=”file” 全透明,这样用户看不到 input type=”file” 。层级在文本框和按钮之上。这样用户在点击按钮的时侯实际上点击的 input type=”file”

JS代码如下:

$(function(){
var textButton="<input id="textfield" class="type-file-text" name="textfield" type="text" />  <input id="button" class="type-file-button" name="button" type="submit" value="浏览…" />"
$(textButton).insertBefore("#fileField");
$("#fileField").change(function(){
$("#textfield").val($("#fileField").val());
);
);

这里用了 jQuery,当 input type=”file” 的值在 onchange 的时侯,将文本框的值设置成 input type=file” 的值,OK了。

演示地址:http://www.css88.com/demo/input-file/