input 上传文件 如何自定义样式？

input 设置type=file即可上传文件，不过默认的input样式很不好看，基本不满需求。可以通过以下方式进行修改,大家有其他好方法也可以分享出来～

原生JS

（1）利用opacity和子绝父相

html代码
<div class="input">
    <img src="https://img.redocn.com/sheying/20150916/yangguangxiaxiannentouliangdegesanghua_4978454.jpg" />
    <input type="file">
</div>

css代码
.input {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: pink;
    }
img {
    width: 100%;
    height: 100%;
    }
input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    }

（2）利用label 和 display

html代码
   <div class="input">
        <label for="file-input">
          <img src="https://img.redocn.com/sheying/20150916/yangguangxiaxiannentouliangdegesanghua_4978454.jpg" />
        </label>
        <input type="file" id="file-input" multiple="multiple" />
    </div>

css代码
.input {
    width: 300px;
    height: 300px;
    background-color: pink;
    }
img {
    width: 100%;
    height: 100%;
    }
input {
    display: none;
    }