一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

兼容各浏览器的 input type=file 文件域美化

时间:2011-10-13 编辑:简简单单 来源:一聚教程网

样式:

 代码如下 复制代码

.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
.upfile{position:absolute;top:-100px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
 HTML:

       


         
         
       

图片大小">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。


在网上找了一些文件上传按钮美化的,都不是很好,不兼容Firefox。

以下是我的方法(非常简单,且各浏览器都有很好表现):

 代码如下 复制代码

HTML:

CSS:
.opacity {opacity:0;FILTER:Alpha(Opacity=0);}
.text {border: 1px solid #c0c1b3;}
.text.opacity {position:absolute;height:20px;}
.text.file {width:129px!important;width:135px;z-index:100;}
.text.file_btn {height:19px;margin:0 0 -1px 0;width:auto!important;width:60px;background:#f0f0f0;padding:;}

热门栏目