动态修改Element-UI el-input选中状态背景色

在Vue项目中动态修改Element-UI的el-input输入框选中状态(聚焦状态)的背景色，可以通过以下几种方法实现：

方法一：使用CSS覆盖样式

/* 全局样式或在组件中加上scoped */
.el-input__inner:focus {
  background-color: your-color !important;
}

动态修改可以通过绑定class或style：

<template>
  <el-input 
    :class="{'custom-focus': isActive}" 
    :style="{'--focus-bg-color': dynamicColor}"
  ></el-input>
</template>

<style>
.custom-focus .el-input__inner:focus {
  background-color: var(--focus-bg-color) !important;
}
</style>

<script>
export default {
  data() {
    return {
      isActive: true,
      dynamicColor: '#ffebee'
    }
  }
}
</script>

方法二：使用深度选择器(scoped样式)

如果使用了scoped样式，需要使用深度选择器：

<style scoped>
/deep/ .el-input__inner:focus {
  background-color: #ffebee;
}
</style>

或者使用新的::v-deep语法：

<style scoped>
::v-deep .el-input__inner:focus {
  background-color: #ffebee;
}
</style>

方法三：动态修改CSS变量

<template>
  <div class="input-container">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      focusColor: '#ffebee'
    }
  },
  mounted() {
    document.documentElement.style.setProperty('--focus-bg-color', this.focusColor);
  },
  methods: {
    changeFocusColor(color) {
      this.focusColor = color;
      document.documentElement.style.setProperty('--focus-bg-color', color);
    }
  }
}
</script>

<style>
.input-container {
  --focus-bg-color: #ffebee;
}

.el-input__inner:focus {
  background-color: var(--focus-bg-color) !important;
}
</style>

方法四：使用自定义指令

// 全局指令
Vue.directive('focus-bg', {
  bind(el, binding) {
    const input = el.querySelector('.el-input__inner');
    input.addEventListener('focus', () => {
      input.style.backgroundColor = binding.value;
    });
    input.addEventListener('blur', () => {
      input.style.backgroundColor = '';
    });
  }
});

// 使用
<el-input v-focus-bg="'#ffebee'"></el-input>

注意事项

1. 使用!important是为了覆盖Element-UI的默认样式
2. 如果修改全局样式，可能会影响项目中所有el-input组件
3. 推荐使用方法三的CSS变量方式，便于动态修改
4. 在scoped样式中需要使用深度选择器才能穿透到子组件

选择哪种方法取决于你的具体需求和项目结构。对于简单的静态修改，方法一就足够了；如果需要动态切换颜色，方法三或方法四更为合适。