修改elementUI el-select 下拉框修改样式不生效问题

要修改Element UI的el-select下拉框样式，你可以通过CSS来覆盖默认的样式。以下是一些常见的样式修改场景和对应的CSS实现方法。

1. 修改下拉框宽度：

.el-select .el-input__wrapper {
  width: 200px; /* 修改为你想要的宽度 */
}

2. 修改下拉选项的背景色：

.el-select-dropdown {
  background-color: #f0f2f5; /* 修改为你想要的颜色 */
}

3. 修改下拉选项的文本颜色：

.el-select-dropdown .el-dropdown-menu__item {
  color: #333; /* 修改为你想要的颜色 */
}

确保你的CSS选择器优先级高于Element UI的默认样式。如果默认样式使用了!important，你需要在你的样式规则中也使用!important来确保覆盖。

如果你使用的是Vue单文件组件（.vue文件），可以在<style>标签中使用上述CSS，或者在<style scoped>中使用并确保使用>>>或/deep/来穿透作用域。

例如：

<style scoped>
.el-select >>> .el-input__wrapper {
  width: 200px;
}
.el-select >>> .el-select-dropdown {
  background-color: #f0f2f5;
}
.el-select >>> .el-dropdown-menu__item {
  color: #333;
}
</style>

或者使用/deep/：

<style scoped>
/deep/ .el-input__wrapper {
  width: 200px;
}
/deep/ .el-select-dropdown {
  background-color: #f0f2f5;
}
/deep/ .el-dropdown-menu__item {
  color: #333;
}
</style>

请注意，如果你使用了Vue 2.x版本且不支持>>>或/deep/的方式，则需要考虑以下几种方法：

• 移除scoped属性，使用全局CSS样式。
• 使用Vue提供的v-bind:style或:class来动态绑定样式。
• 使用JavaScript为el-select添加类名或直接操作DOM元素来应用样式。