将type= ‘file‘的input框自定义样式

折木泛舟

于 2023-10-22 22:49:16 发布

阅读量369

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_46880889/article/details/133974467

版权

实现思路：

创建一个元素，实现上面的样式，然后将 input 覆盖在该元素上，并将input透明度设置为0，这样就看不到input原始样式，点击元素可以实现文件上传功能。
上代码：

html:
<el-input
    v-model="form.productCode"
    placeholder="请输入产品sku编号"
    style="width:250px"
    clearable
>
    <template #append>
        <div class="upload-img-btn">
            <input
              id="upload"
              type="file"
              accept="image/*"
              class="upload-input"
              @change="uploadChange"
           >
            <img src="../assets/icons/saoyisao.png" class="img-scan"/>
         </div>
     </template>
 </el-input>
css:
.upload-img-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.img-scan {
  display: block;
  width: 32px;
  height: 32px;
}
.upload-input {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  outline: medium none;
  cursor: pointer;
  -moz-opacity: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}
::v-deep .el-input-group__append {
  background-color: #fff;
  padding: 0 10px;
  border: none;
}
::v-deep .el-input__inner {
  border: none;
}
::v-deep .el-form-item__content .el-input-group {
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}

效果图：