element-ui 修改 input 样式

修改之前的样式：

想要达到的效果：

输入框背景颜色透明

代码如下：

<el-input v-model="input4" placeholder="请输入内容" prefix-icon="el-icon-search"  size="mini" class="elinput__innerTransparent">
</el-input>

<style lang="scss" >

这里把样式重新copy写了下

  .el-input__inner {
      background-color: transparent !important;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #fff;
      font-size: inherit;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 90%;
  }

利用深度选择器

/deep/ 深度选择器（可以百度查看写法）

我把它放在了最外面一层的类中

    /deep/.el-input__inner {
        background-color: transparent !important;
    }

然后就达到了想实现的效果