关于如何覆盖上传文件按钮样式的问题

覆盖前

覆盖后

代码：

html:

<div class="button upload-wrap anticon" nv-file-drop="" uploader="uploader">
  <input class="file-ele" file-model="image" name="image" type="file" id="input" @change="handleImport">
  <div class="file-open"><em class="icon icon-upload"></em>&nbsp;上传文件</div>
</div>

js:

// 导入按钮
    handleImport(){
    //formdata格式上传
      var formData = new FormData();
      if(document.getElementById('input').files[0].size/1024 > 10240){
        this.$modal.msgWarning("上传的文件不得超过10M!");
      }
      else{
        formData.append('file', document.getElementById('input').files[0]);
        //上传接口调用
      }
    },

css:

.upload-wrap{
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-size: 12px;
  margin-left: 20px;
  .file-ele{
    position: absolute;
    top:0;
    right:0;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
  .file-open {
    width: 90px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    background: rgba(0,126,255,0.78);
    border: #16b9fd 2px solid;
    box-shadow:#16b9fd 0px 0px 10px inset;
  }
}