两种文件上传按钮的自定义

前端入坑纪 29

今天来个关于如题设定的内容更新，简单的总结常用的两种方式（确实是两种，我没数错，请往下看）。

炒鸡简单的效果图

OK，first things first！项目链接

HTML 结构

    <h2>方式一</h2>
    <div class="way1">
        <input type="file">
        <a href="javascript:;">文件上传</a>
    </div>

    <h2>方式二 </h2>
     
    <div class="way2">
    <!--label包裹input，点了label相当于点了input-->
        <label>文件上传<input type="file" hidden></label>
    </div>

    <h2>方式三 </h2>
    <div class="way3">
      <!--这个算是上面的变种，label 加for属性，指向input的id-->
        <label for="upfls">文件上传</label><input id="upfls" type="file" hidden>
    </div>

用三个div分别包裹要用到的文件上传按钮和相应的元素，很简单的构成。

CSS结构

        a {
            text-decoration: none;
            color: #333;
        }
        // 给每个div定义样式，背景啊，宽高之类
        .way1,
        .way2,
        .way3 {
            width: 50%;
            position: relative;
            background: #ededed;
            border-radius: 4px;
            height: 45px;
            line-height: 45px;
        }
        
        // 第一种是绝对定位，把input file按钮放在最上层，然后全透明
        .way1 input {
            display: block;
            width: 100%;
            height: 45px;
            opacity: 0;
            position: absolute;
            z-index: 3;
            top: 0;
            left: 0;
        }
        
        .way1 a {
            display: block;
            width: 100%;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            text-align: center
        }
        

        // 第二种就是用label这个input的老搭档，包裹input file
        .way2 label,
        .way3 label {
            display: block;
            width: 100%;
            height: 45px;
            text-align: center;
        }

所以就是这样了，今天木有js，轻松一下！

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！