注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

真正兼容IE、Firefox、Chrome的文件选择input file按钮美化CSS代码  

2014-08-18 09:54:51|  分类: php |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
现实中很多时候传统的文件选择按钮已经满足于美丽的页面,严重影响网页美观,网络上的
这种代码很多,但是真正兼容的确实很少,今天我们提供一份真正兼容IE、Firefox、Chrome
的文件选择file按钮美化代码,无需JS模拟,纯CSS实现,下面贴出代码:
真正兼容IE、Firefox、Chrome的文件选择input file按钮美化CSS代码


1.CSS代码
.new-contentarea {
    width: 100%;
    overflow:hidden;
    margin: 0 auto;
    position:relative;
}
.new-contentarea label {
    width:100%;
    height:100%;
    display:block;
}
.new-contentarea input[type=file] {
    width:188px;
    height:60px;
    background:#333;
    margin: 0 auto;
    position:absolute;
    right:50%;
    margin-right:-94px;
    top:0;
    right/*\**/:0px\9;
    margin-right/*\**/:0px\9;
    width/*\**/:10px\9;
    opacity:0;
    filter:alpha(opacity=0);
    z-index:2;
}
a.upload-img{
    width:165px;
    display: inline-block;
    margin-bottom: 10px;
    height:57px;
    line-height: 57px;
    font-size: 20px;
    color: #FFFFFF;
    background-color: #f38e81;
    border-radius: 3px;
    text-decoration:none;
    cursor:pointer;
}
a.upload-img:hover{
    background-color: #ec7e70;
}

.tc{text-align:center;}

2.HTML内容
<div class="new-contentarea tc">
<a href="javascript:void(0)" class="upload-img"><label for="upload-file">上传图像</label></a>
<input type="file" class="" name="upload-file" id="upload-file" />
</div>

  评论这张
 
阅读(108)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016