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

最新推荐文章于 2024-09-23 16:21:13 发布

原创最新推荐文章于 2024-09-23 16:21:13 发布 · 791 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #input

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在Vue项目中优化文件上传输入框样式的方法，通过遮盖法实现自定义样式，同时保持文件选择功能。文章详细展示了如何使用HTML、CSS和Vue.js代码来创建一个既美观又实用的上传按钮。

1.描述

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

牛头不搭马嘴.jpg

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   上传文件后要对文件处理的代码  */
    }
  }