关于input标签改变其样式问题

1.描述

最近在做vue的demo，用到上传文件的input 标签，发现它的样式和值只能读不能写（谁可以，请留言告诉我），这样会很丑，跟总体不搭配。列如这样子：

2.解决

▓遮盖法：
☛原理：把input 标签放到一个div标签中，给这个div取名为up，再创建一个div，给这个div取名为under,然后把up放进under里面。这样，就可以用underdiv挡住updiv了，把underdiv设置成喜欢的样式。但是，有一个穿透问题，没事！没有什么是代码解决不了的，上码：（最后效果是导入excel那个按钮的效果）

<!-- html page -->
<div class="under" v-on:click="clickupload" >
            <i class="el-icon-folder-add" slot="prefix" style="color: white;margin-top: 8px;margin-left: 20px"> 导入Excel</i>
            <div class="up">
            <input id="impex" class="impex"  type="file" @change="importfxx(this)"
                 accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
            </div>
          </div>
<!-- 样式-->
.under{
    display: block;
    margin-top: 20px;
    margin-left: 30px;
    float: left;
    width: 150px;
    height: 35px;
    border-radius: 5px;
    background: #409EFF;
    border: #409EFF 1px solid;
  }
  .up{
    position: absolute;
    width: 150px;
    height: 35px;
    border-radius: 5px;
    background: red;
    border: red 0px solid;
    z-index: -1;
  }
  .impex{
    width: 150px;
    height: 35px;
    position: absolute;
    width: 150px;
    /*z-index: -1;*/
  }
  <!--穿透问题 underdiv的点击事件绑定clickupload()，点击underdiv之后触发 clickupload()方法 -->
  methods: {
    clickupload(){
      // alert(123)
      document.getElementById('impex').click()    //input标签被点击（曲线救国+_+）
    },
    importfxx(){
      alert(123)     /*  your code   上传文件后要对文件处理的代码  */
    }
  }