更改input [type=file]的样式

上传文件的输入框演示往往非常难看，但又不想使用bootstrop或者elementui框架的样式

所以可以通过自定义样式来修改input的样式

可以通过父子定位来实现修改

代码如下

html代码

<div class="group">
        <label for="img" class="labelImg">
          <input type="button" id="btn" value="请上传识别图像" />
          <input type="file" name="img" id="img" /><br /><br />
        </label>
  </div>

css代码

 .labelImg {
      position: relative;
      #img {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
      }
      #btn {
        padding: 5px 10px;
        background-color: #00b0f0;
        color: #fff;
        border: none;
        border-radius: 5px;
      }
    }

修改后的样式