CSS之文件实现上传按钮

文件上传按钮

<input type="file" id="btn_file">

默认样式：

默认样式着实不好看，而且我想让后面的‘未选择文件上传’去掉，将color设置为transparents就可以实现，但是我又想将按钮的字体颜色改为蓝色，显然就冲突了，实现不了。

改进方法：

<input type="file" id="btn_file" style="display:none">
<button @click="handleSelectFile" class="upload_file">上传文件</button>

 .upload_file{
    color:#333333;
    background-color: #fff;
    padding:10px 30px;
    margin-right:10px;
    outline:none;
    border:1px solid #ccc;
  }

 methods:{
    handleSelectFile:function(){
      document.getElementById('btn_file').click()
    },
}

效果如图

其中还解决了几个效果问题
（1）右边蓝色按钮本来用input元素，发现点击会出现抖动的情况，遂改成button元素，（2）butto元素点击会出现蓝色边框，设置outline:none去掉，中间的文本框道理类似
（3）蓝色button元素有阴影边框，设置border:none去掉
（4）而左边的白色button元素则重新设置边框border:1px solid #ccc覆盖掉默认边框。
（5）布局问题：
整个div里面包含左边的按钮，中间的输入框和右边的按钮，将最外层div设置为flex盒子

 #upload{
    display:flex;
    flex-direction: row;
    justify-content: center;
    padding-top:20px;
    padding-bottom:20px;
  }

而中间的输入框设置为自适应

 .input_url{
    padding:10px;
    flex-grow:1;
    outline:none;

  }