关于文件上传按钮样式美化的一些总结

     最近在公司作项目遇到个需求，就是要作一个上传图片的功能，很简单的一个功能，可是在实现过程当中却遇到了不少坑，在这里总结一下，让碰到此问题的朋友也能够有更多选择，如下所述纯属我的观点，若有不一样的方法，欢迎在评论区留言交流，共同进步！
       刚开始个人想法是直接用定位（position）+透明度（opacity）直接来实现，实现的过程很顺利，可是最后却发现了一个问题，什么问题呢，很简单，就是用户体验的问题，我想给这个按钮加一个鼠标移入变手的效果，却发现始终有一部分不会生效，检查代码发现原来是由于上传文件的按钮不会应用这个样式，那我我就想把他移出到按钮以外的位置，可是这样就会出现按钮超宽的问题，即便在看不见的部位也能点到，因此我就这个问题开始了一些实验，在网上也找过方法，发现都不是我想要的，最后决定本身来写一写，不研究不知道，一研究还发现了很多方法能实现，我总结除了三种实现的方法以及实现思路，但愿对你们有帮助，若是还有其余的方法，请在评论区留言，共同窗习，好了废话很少说，贴代码：

<!--html结构-->
<!--第一种方法:经过定位+透明度来实现（不推荐）-->
<div class="first">
    第一种方法
    <button>上传图片</button>
    <input type="file">
</div>

/*css代码*/
/*第一种的按钮样式*/
.first{
    position: relative;
    height: 30px;
    line-height: 30px;
}
.first button,.first input{
    position: absolute;
    left: 85px;
    top: 0;
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: skyblue;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
}
.first input{
    opacity: 0;
    width: 185px;
    left: 0;/*这里是为了让cursor效果在按钮内彻底生效，可是弊端就是宽度增长，在按钮左侧看不见的位置也能点击到*/
}

<!--html结构-->
<!--第二种方法：经过label的关联属性来实现-->
<div class="item">
    第二种方法
    <label for="file1">上传图片</label>
    <input type="file" id="file1">
</div>

/*css代码*/
/*第二种的按钮样式*/
.item label{
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    color: #fff;
    line-height: 30px;
    background-color: skyblue;
    border-radius: 5px;
    cursor: pointer;
}
.item input{
    display: none;
}

<!--html结构-->
<!--第三种方法:经过js事件绑定来实现（推荐）-->
<div class="item">
    第三种方法
    <button class="btn">上传图片</button>
    <input type="file" id="file">
</div>

/*css代码*/
/*第三种的按钮样式*/
.item button{
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: skyblue;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
}
.item input{
    display: none;
}

// js代码
// 第三种方法
document.querySelector('.btn').addEventListener('click',function () {
    document.querySelector('#file').click();
});

上面三种方法的样式都是同样的，如图：

总结上述三种方法比较推荐第三种，第一种不推荐的理由：

       1、样式代码相对较多，而且对于cursor，file的按钮不会应用样式，因此须要让他宽度更宽才行，这样就会出如今不可见区域也能点击上传的bug（目前没找到解决办法）。

       2、结构固定。

       3、须要使用定位。

第二种不推荐的理由：

       局限性：限制了元素，只能使用label，且只能使用id来进行关联，id做为惟一标识，页面上定义的id越少越好，想要在同一页面使用多个就须要定义多个id。

第三种推荐的理由：

       1、结构：样式简单，结构清晰

       2、适用范围：不限制元素的使用，由于是用js动态绑定的固然，上面的纯属我的观点，若是有更好的观点欢迎在评论区留言讨论~