elementUi中的el-input去掉border边框

前言

在开发过程中遇到需要去掉 el-input的边框，使其满足ui要求，element-ui官网的el-input的样子如下：

但是我需要的是下面这种没有边框的效果：

不可行做法

例如这样一段代码来设置

<div class="inputDemo">
    <el-input></el-input>
</div>

通过实践，border: none; 或者 border: 0; 都行不通，即以下方法并不可行：

通过选择 el-input

.inputDemo el-input{
    border: none;
}

.inputDemo el-input{
    border: 0;
}

通过选择 input

.inputDemo input{
    border: none;
}

.inputDemo input{
    border: 0;
}

以上方法中，通过选中 .el-input__inner也不可行

在el-input组件中，是通过 .el-input__inner来设置边框的

解决办法

>>> 是vue的深度选择器，vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过 >>> ，穿透scoped。

无任何依赖时,纯css写 >>> 是无效果哒

写法请遵循：父级>>>el-input

就以这个例子：

<div class="inputDeep">
    <el-input></el-input>
</div>

css实现

  /* 利用穿透，设置input边框隐藏 */
  .inputDeep>>>.el-input__inner {
    border: 0;
  }
  /* 如果你的 el-input type 设置成textarea ，就要用这个了 */
  .inputDeep>>>.el-textarea__inner {
    border: 0;
    resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
  }