Vue3+element PLUS 2.5 中el-select样式修改

在Vue 3和Element Plus 2.5中，修改el-select的样式可以通过CSS来实现。你可以在全局的CSS文件中添加对应的类选择器来覆盖默认样式。

例如，如果你想要修改下拉菜单的背景色和文本颜色，可以这样做：

/* 修改el-select的下拉菜单背景色 */
.el-select-dropdown {
  background-color: #f5f5f5;
}
 
/* 修改el-select的下拉菜单文本颜色 */
.el-select-dropdown .el-dropdown-menu__item {
  color: #333;
}
 
/* 如果需要修改当前选中项的样式 */
.el-select .el-input.is-focus .el-input__inner {
  border-color: #ff0000; /* 红色边框 */
}

将上述CSS代码添加到你的全局样式文件中，并确保该文件被项目加载。

如果你想要针对特定的el-select组件修改样式，可以添加一个自定义类并在那个类上应用样式：

<template>
  <el-select class="custom-select-style">
    <!-- options -->
  </el-select>
</template>
 
<style>
/* 修改特定el-select的样式 */
.custom-select-style .el-select-dropdown {
  background-color: #f0f0f0;
}
</style>

请注意，Element Plus可能会为选择器添加scoped属性，导致样式只应用于当前组件。如果是这种情况，你可以使用深度选择器>>>或/deep/（Element Plus推荐使用>>>）来确保样式可以穿透组件边界：

/* 使用深度选择器 */
.custom-select-style >> .el-select-dropdown {
  background-color: #f0f0f0;
}

或者使用Vue 3的新的作用域CSS方法：

/* 使用::v-deep */
::v-deep .custom-select-style .el-select-dropdown {
  background-color: #f0f0f0;
}

确保你的Vue项目配置允许使用这些方法。