67. input标签上传文件样式

67. input标签上传文件样式

备注 在平时使用input标签上传文件时，我们往往不需要使用它的默认样式，但是也往往很难修改它的默认样式，所以只能通过 将input标签覆盖在我们的按钮上，然后将input标签设置定位脱离文档流，并将透明度调为零解决。

html代码

<div class="m-btn" v-if="{$operationArr.uploadFile} == 1">上传
    <input type="file" id="fileupload" :data-tmtid="item.tmt_id" :data-type="1" :data-index="index" @change="uploadFile" /></div>

css样式

 .m-btn {
     width: 50px;
     height: 24px;
     background: rgba(23, 125, 187, 1);
     border-radius: 30px;
     font-size: 12px;
     font-weight: 400;
     line-height: 24px;
     color: rgba(255, 255, 255, 1);
     text-align: center;
     cursor: pointer;
     position: relative;
 }
        
.m-btn input {
    width: 50px;
    height: 24px;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}