<el-input>设置背景色不生效

如果您在使用 `<el-input>` 组件时设置背景色不生效，可以尝试给 `<el-input>` 组件添加 `!important` 来强制覆盖原有样式，例如：

<el-input style="background-color: red !important;"></el-input>

或者您可以使用 CSS 选择器来修改样式，例如：

.el-input__inner {
  background-color: red;
}

这样可以确保修改的样式优先级高于原有样式。

相关问题

<el-input>输入框设置背景色总是无效

如果您在 `<el-input>` 输入框上设置背景色总是无效，可能是因为该组件的样式被其他 CSS 样式表覆盖了。这时您可以使用浏览器的开发者工具检查样式，找到覆盖背景色的样式，并对样式进行修改或者添加样式覆盖它。

另外，由于 ElementUI 组件使用了许多内部样式，如果您在使用组件时直接修改样式，可能会影响到组件的布局和样式。因此，建议您在修改组件样式时，使用 CSS 选择器来限定样式的作用范围，避免影响其他组件。

以下是一个使用 CSS 选择器修改 `<el-input>` 输入框背景色的示例：

<el-input class="my-input"></el-input>

<style>
.my-input .el-input__inner {
  background-color: #f5f5f5;
}
</style>

这里使用了 `.my-input` 类选择器来限定样式的作用范围，`.el-input__inner` 是 `<el-input>` 组件输入框的内部元素，您可以使用该选择器来修改输入框的样式。这样可以确保修改的样式优先级高于原有样式，同时避免影响其他 `<el-input>` 组件。

修改<el-input>中的.el-input__inner中的背景色，但是总是不生效，使用了scoped，如何解决

如果你使用了 scoped 样式，那么 `.el-input__inner` 的样式可能会被作用于 `el-input` 组件之外的元素，从而导致样式不生效。这是因为 scoped 样式会在编译时自动为选择器添加一个唯一的前缀来避免样式污染，但是 `.el-input__inner` 的样式可能会被子组件渲染到其他地方，从而导致选择器无法匹配。

解决 scoped 样式无法作用于子组件的问题，可以通过以下两种方式实现：

1. 使用 `/deep/` 或 `>>>` 选择器

你可以使用 `/deep/` 或 `>>>` 选择器来强制作用于子组件中。例如：

<style scoped>
.parent-class /deep/ .el-input__inner {
  background-color: #f0f0f0;
}
</style>

<template>
  <div class="parent-class">
    <el-input></el-input>
  </div>
</template>

或者：

<style scoped>
.parent-class >>> .el-input__inner {
  background-color: #f0f0f0;
}
</style>

<template>
  <div class="parent-class">
    <el-input></el-input>
  </div>
</template>

这样就可以强制作用于子组件中，从而修改样式。

2. 使用 deep 样式

你可以使用 `::v-deep` 或 `::deep` 伪元素来避免 scoped 样式的限制，从而修改样式。例如：

<style scoped>
.parent-class ::v-deep .el-input__inner {
  background-color: #f0f0f0;
}
</style>

<template>
  <div class="parent-class">
    <el-input></el-input>
  </div>
</template>

或者：

<style scoped>
.parent-class ::deep .el-input__inner {
  background-color: #f0f0f0;
}
</style>

<template>
  <div class="parent-class">
    <el-input></el-input>
  </div>
</template>

这样就可以避免 scoped 样式的限制，从而修改样式了。