el-input黑色输入

在Vue.js中使用Element UI库时，如果你想将`el-input`组件的输入框背景色设置为黑色，可以通过以下几种方式实现：

### 方法一：通过内联样式

你可以在`el-input`组件中使用`style`属性直接设置背景色：

<template>
  <el-input
    v-model="inputValue"
    style="background-color: black; color: white;"
    placeholder="请输入内容"
  ></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

### 方法二：通过自定义CSS类

你可以定义一个自定义的CSS类，并在`el-input`组件中使用`class`属性来应用该类：

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

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

<style>
.black-input {
  background-color: black;
  color: white;
}
</style>

### 方法三：通过全局样式

如果你希望全局所有`el-input`组件都应用黑色背景，可以在全局样式文件中进行设置：

/* 在全局样式文件（如main.css或App.vue）中 */
.el-input {
  background-color: black;
  color: white;
}

### 注意事项

1. **可读性**：确保白色文字在黑色背景上有足够的对比度，以保证可读性。
2. **主题覆盖**：如果你使用的是Element UI的主题，请确保自定义样式在主题样式之后加载，以避免被覆盖。

通过以上方法，你可以轻松地将`el-input`组件的输入框背景色设置为黑色。