修改el-input 默认样式(深度选择器)

需要使用到深度选择器

在引入其他UI组件的时候因为要改变其组件的样式 一般的css选择器是无法改变的 因为是使用的 scoped 会有所限制 如果要直接修改组件内的样式 那么我们需要用到 深度选择器 /deep/

vue 2.x 深度选择器 中可以使用 >>>、/deep/、::v-deep
注意：Sass 对 >>> 可能存在无法解析的问题，建议使用后两者

>>>选择器

如果项目使用的是css原生项目 那么可以直接用 >>> 进行穿透

<style scoped>
/*编译前*/
.a >>> .b { 
 /* ... */
}

/*编译后*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>

/deep 选择器，使用了预处理器都可以使用

<style lang="scss" scoped>
/*用法1*/
.a {
 /deep/ .b { 
  /* ... */
 }
} 
/*用法2*/
.a /deep/ .b { 
  /* ... */
 }
</style>

::v-deep选择器，使用了预处理器都可以使用

<style lang="scss" scoped>
/*用法1*/
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
/*用法2*/
.a ::v-deep .b {
  /* ... */
}
</style>

vue 3.x可以使用 :deep(el)

<style lang="scss" scoped>
/*用法1*/
.a{
 :deep(el) { 
  /* ... */
 }
} 
/*用法2*/
.a :deep(el) {
  /* ... */
}
</style>

修改el-input

<style lang="scss" scoped>
  .el-input {
      // 深度选择器
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset; 
      // 去除input白色边框
      --el-input-text-color: rgb(236, 225, 225); // 修改input输入框字体颜色
      --el-input-icon-color: rgb(208, 192, 192); // 修改icon颜色
    }
  }
</style>
<style>
    /* input输入框样式 */
.search-input .el-input__wrapper {
  background-color: rgba(156, 52, 52, 0.247); // 背景颜色
  border-radius: 16px; // 圆角
  border: 0;
  color: #fffafa;
}
</style>

修改下面的属性

实现的效果