模拟input type=file

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

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

HTML代码如下:

[code=”html”]

[/code]

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

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

CSS代码如下:

[code=”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 }
[/code]

注意:这里的filter:alpha(opacity:0);opacity: 0是让input type=”file”全透明,这样用户看不到input type=”file”。层级在文本框和按钮之上。这样用户在点击按钮的时侯实际上点击的input type=”file”;
js代码:
[code=”javascript”]
$(function(){
var textButton=” ?
$(textButton).insertBefore(“#fileField”);
$(“#fileField”).change(function(){
$(“#textfield”).val($(“#fileField”).val());
);
);[/code]
这里用了jq当input type=”file”得值onchange的的时侯将文本框的值设置成input type=”file”的值,OK了
demo演示:https://www.css88.com/demo/input-file/
赞(0) 打赏
未经允许不得转载:WEB前端开发 » 模拟input type=file

评论 12

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    之前看美工这么玩过,使file变的很漂亮了。

    simaopig9年前 (2010-05-06)回复
  2. #-48

    前几天在一个OA上正好看到这个效果,今天看见码头做的 ~正好学习下~
    哈哈!

    一醉9年前 (2010-05-11)回复
  3. #-47

    请交学费谢谢!

    9年前 (2010-05-11)回复
  4. #-46

    好效果

    开心果9年前 (2010-05-11)回复
  5. #-45

    就是鼠标形状除了ie都没办法改变

    atlas9年前 (2010-05-29)回复
  6. #-44

    file对象感觉是比较失败的一个东西,操作起来很不方便,界面调整一下还可以,但功能太糟糕,这方面一些第三方控件做的好一些,比如image uploader,abcuploader(名字记不清了)

    abss9年前 (2010-06-23)回复
  7. #-43

    码头,IE6下是不行的,不信你看看。。。

    Kevin8年前 (2011-06-27)回复
  8. #-42

    可惜在ie6里还是有情况啊~~~~~~~~~~

    米萨7年前 (2011-09-17)回复
  9. #-41

    照你上门的说的,不行啊。代码很多错的先不说。要想实现这效果还要把你演示网站里的 加上才行。求解决

    uling7年前 (2011-12-05)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏