【Element-plus】修改el-input、el-select的样式(代码+教程)

在Element Plus中，您可以通过CSS覆盖默认的样式来修改el-input和el-select的样式。以下是一个简单的例子，展示如何通过自定义类来修改这些组件的样式。

首先，定义您的自定义CSS类：

/* 自定义输入框样式 */
.custom-input .el-input__inner {
  background-color: #f0f0f0; /* 背景色 */
  border-color: #d3dce6; /* 边框色 */
  color: #333; /* 文字颜色 */
}
 
/* 自定义下拉选择器样式 */
.custom-select .el-select .el-input__inner {
  background-color: #e6f7ff; /* 背景色 */
  border-color: #99c6f5; /* 边框色 */
  color: #333; /* 文字颜色 */
}
 
.custom-select .el-select .el-input .el-select__caret {
  color: #99c6f5; /* 三角图标颜色 */
}

然后，在您的Vue组件中应用这些自定义类：

<template>
  <div>
    <!-- 自定义输入框样式 -->
    <el-input class="custom-input" placeholder="请输入内容"></el-input>
 
    <!-- 自定义下拉选择器样式 -->
    <el-select class="custom-select" v-model="value" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [{ value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }]
    };
  }
};
</script>
 
<style>
/* 包含上面CSS代码 */
</style>

请注意，您可能需要根据Element Plus的实际CSS类名来调整您的自定义CSS规则，以确保选择器的特指度足够高，从而不会影响到其他元素。您可以查看Element Plus官方文档来获取最新的CSS类名。