美化上传input file

最新推荐文章于 2022-12-20 17:08:36 发布

binglingnew

最新推荐文章于 2022-12-20 17:08:36 发布

阅读量487

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/binglingnew/article/details/45890019

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

默认的input file上传文件的是这样的：
这里写图片描述

美化过后的样子：
这里写图片描述

原理：
input外围包个div，放背景控制大小，超出隐藏，input绝对定位，大小放大，并设置透明

实现代码：

html代码：

<form>
    <div class=btn_addPic>
        <input class="filePrew" tabIndex="3" type="file" size="3" name="pic" />
   </div>
</form>

css代码：

.btn_addPic{ 
    position: relative; 
    width: 304px; 
    height: 304px; 
    overflow: hidden; 
    border: 1px dashed #EBEBEB; 
    background:#fff url(../images/tipsQRadd.png) center center no-repeat; 
    color: #999999; 
    cursor: pointer; 
    text-align: center;
    margin:40px auto; 
} 


.filePrew { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 304px;
    height: 304px;
    font-size: 100px; /* 增大不同浏览器的可点击区域 */ 
    opacity: 0; /* 实现的关键点 */ 
    filter:alpha(opacity=0);/* 兼容IE */ 
}