美文网首页
定制化上传按钮是如何实现的

定制化上传按钮是如何实现的

作者: webcode | 来源:发表于2018-12-07 11:29 被阅读0次

    CSS代码

    .btn{
        box-sizing: border-box;
        padding: 5px 15px;
        width: 100px;
        height: 30px;
        background: #0271DA;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }
    .box{
        position: relative;
        width: 100px;
        height: 30px;
        overflow: hidden;
    }
    .file{
        position: absolute;
        top: 0;
        left: -100px;
        width: 300px;
        height: 30px;
        opacity: 0;
        cursor: pointer;
        z-index: 100;
    }
    

    HTML代码

    <div class="box">
        <a class="btn">上传头像</a>
        <input type="file" class="file" name="" id="" value="" />
    </div>
    

    如果明白了,请赞赏,1分也是爱。
    如果还是不理解,看来需要视频讲解以及面对面一对一讲解了(视频+源码 5元)
    联系方式QQ:1718202383
    可接应届毕业生论文项目
    可接外包项目


    image.png

    相关文章

      网友评论

          本文标题:定制化上传按钮是如何实现的

          本文链接:https://www.haomeiwen.com/subject/ugxthqtx.html